CODEWITHSUNDEEP
jqueryhtmlcsspositioncss-position
Aerodynamika
Aerodynamika

Reputation: 8413

Show DIV at the bottom of another DIV without scrolling down

I have 3 divs:

#statements {
  position: relative;
  top: 0;
  bottom: 0;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.4);
  max-width: 340px;
  padding-left: 50px;
  padding-bottom: 50px;
  z-index: 1;
}  

#entries {
  position: relative;
  height: 60%;
  max-width: inherit;
  overflow: scroll;
}

#entryform {
  position: absolute;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.8);
  width: 340px;
}

I need it so that the entries and the entryform located inside the statements have the following positioning:

  1. all the content inside entryform should always at the bottom of statements
  2. statements is always the height of the browser window
  3. entries is always scrollable div that is positionined at the top of statements and takes 60% of space.

I tried with the code above and it doesn't really work.

<div id="statements">
  <div id="entries">entry</div>
  <div id="entryform">entryform</div>
</div>

Click here for JSFiddle

As you can see above the content loads fine, but I have to scroll down the window with the results to see "entryform". Why? How can I fix that so that "entryform" shows at the bottom of the window without me having to scroll down?

UPDATE one solution could be to set position: fixed for the entryform element, but I can't do that because in my design there's a menu on the left and when the user opens it, the statement div and all the divs inside should move to the right. With position: fixed this doesn't happen, i.e. the entryform stays where it is.

Upvotes: 1

Views: 918

Answers (2)

jjroman
jjroman

Reputation: 30

The padding that you have on #statements is causing it's total height to be greater than that of the page.

The 'height: 100vh;' that you are using is setting the inner height of the statements element to match that of the viewport, and then the 'padding-bottom: 50px;' is being added to the total height of the element, causing it to be larger than the viewport.

You can either remove the padding from #statements or adjust the 'bottom' value on #entryform to raise it above the padding.

Upvotes: 0

Turnip
Turnip

Reputation: 36632

From my understanding of your description this is what you want...

html, body {
    height: 100%;
    margin: 0;
}    
#statements {
      position: relative;
      top: 0;
      bottom: 0;
      height: 100vh;
      background-color: rgba(255, 255, 255, 0.4);
      max-width: 340px;
      padding-left: 50px;
      z-index: 1;
      background: red;
    }  

    #entries {
      position: relative;
      height: 60%;
      max-width: inherit;
      overflow: scroll;
      background: green;
    }

    #entryform {
      position: absolute;
      bottom: 0;
      background-color: rgba(255, 255, 255, 0.8);
      width: 340px;
      background: blue;
    }
<div id="statements">
      <div id="entries">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer justo quam, venenatis et blandit et, varius id neque. Quisque laoreet justo justo, sed rhoncus nisl mollis sed. Nunc vitae interdum lacus. Aenean in justo orci. Vestibulum lobortis risus id tellus vehicula vestibulum. Praesent quis cursus ex, quis mollis diam. Nullam feugiat id sapien vel porta. Etiam elit diam, ultrices eu nisi sed, tempus varius erat. Duis aliquet mauris felis, id viverra est vulputate ut. Donec pharetra felis eu facilisis ornare. Aliquam ac justo vitae lacus tristique interdum non sollicitudin nunc. Maecenas tincidunt elit orci, et commodo est blandit a. Nunc lacinia, mauris et porttitor porttitor, libero tellus lobortis nunc, id cursus neque dui in tortor. In sed mi et augue pretium sollicitudin.
      </div>
      <div id="entryform">entryform</div>
    </div>

JSFiddle version

Upvotes: 2

Related Questions