Fixed Positioned Div Is Extending Outside of HTML & Body

Fixed Positioned Div is extending outside of HTML & Body

try add these into your .css

html {
width: 100%;
height: 100%;
position: relative;
}
body {
width: 100%;
height: 100%;
position: relative;
}

acctually just one of them would probably solve your problem, but i'm not sure wich.. probably body

div extending outside HTML and body

It's the absolute positioning that's doing this at the bottom of the page, you are placing the footer absolutely with top:100%, which seems to cause overflow by extending the element beyond the boundaries of the body.

I noticed that top:95% on .bottom "fixes" this.

But an even simpler solution would be to just to use flexbox, as this scenario is what it is for, and it's way less work:

body,html {  margin: 0;  padding: 0;}
.container {  height: 100vh;}
.container {  display: flex;  flex-direction: column; /*specifies main axis to be vertical*/  justify-content: space-between; /*main axis positioning*/  align-items: center; /*cross axis (horizontal) positioning*/}

<html>
<head>  <title>Position</title></head>
<body>  <div class="container">
    <div class="top">      <p>I am top div</p>    </div>
    <div class="center">      <p>I am center div</p>    </div>
    <div class="bottom">      <p>I am bottom</p>    </div>
  </div>
</body>
</html>

How can I get an absolutely-positioned div to extend outside its relativley-positioned parent, which has overflow: auto?

Your problem is the position:relative parent. Since you have that positioning on the element, the inner box will ALWAYS stay within the overflow (position:absolute is relative to the nearest positioned parent).

To avoid the issue, you can remove the "position:relative" from the outer div, and add a wrapper div with the "position:relative;". You'll have to then add the "top:0;" declaration to your inner div (you should always have that, actually).

The end result is one extra div, and it looks like this: (you can remove the "z-index:-1" style, I just added that so you can see the result better)

<div style="position:relative;border:1px solid blue;">    <div style="height: 100px; width: 100px; background: red; overflow: auto;">        if there is some really long content here, it will cause overflow, but the green box will not        <div style="position:absolute; z-index:-1; left: 20px; top:0; height: 200px; width: 200px; background: green;">        </div>    </div></div>

Fixed position but relative to container

Short answer: ~~no.~~ (It is now possible with CSS transform. See the edit below)

Long answer: The problem with using "fixed" positioning is that it takes the element out of flow. thus it can't be re-positioned relative to its parent because it's as if it didn't have one. If, however, the container is of a fixed, known width, you can use something like:

#fixedContainer {
  position: fixed;
  width: 600px;
  height: 200px;
  left: 50%;
  top: 0%;
  margin-left: -300px; /*half the width*/
}

http://jsfiddle.net/HFjU6/1/

Edit (03/2015):

This is outdated information. It is now possible to center content of an dynamic size (horizontally and vertically) with the help of the magic of CSS3 transform. The same principle applies, but instead of using margin to offset your container, you can use translateX(-50%). This doesn't work with the above margin trick because you don't know how much to offset it unless the width is fixed and you can't use relative values (like 50%) because it will be relative to the parent and not the element it's applied to. transform behaves differently. Its values are relative to the element they are applied to. Thus, 50% for transform means half the width of the element, while 50% for margin is half of the parent's width. This is an IE9+ solution

Using similar code to the above example, I recreated the same scenario using completely dynamic width and height:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 0%;
    transform: translateX(-50%);
}

If you want it to be centered, you can do that too:

.fixedContainer {
    background-color:#ddd;
    position: fixed;
    padding: 2em;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Demos:

jsFiddle: Centered horizontally only

jsFiddle: Centered both horizontally and vertically

Original credit goes to user aaronk6 for pointing it out to me in this answer

Prevent child div from expanding outside of parent?

You can change your #insideDiv's max-height CSS property from 100% to inherit. So this rule will be like this:

max-height: inherit;

You also might want to add box-sizing:border-box; if you go this route, as that will allow any borders or padding on #insideDiv to behave as (probably) desired.

The cause of this issue is that max-height:100%; looks for the parent's height, not its max-height for how tall it's allowed to be. Thus, you end up with the classic non-deterministic relative height problem. If you give the parent a deterministic height (rather than max-height), 100% can resolve deterministically.

Why does inner DIV spill out of outer DIV?

Because of the margin - the width is 100% PLUS the margin. To avoid that, write width: calc(100% - 10px); (= twice the margin.) Same for height.

#outer {  position: fixed;  width: 30%;  height: 30%;  background-color: black;}#inner {
  width: calc(100% - 10px);  height: calc(100% - 10px);  margin: 5px;  background-color: orange;}

<div id="outer">  <div id="inner">  </div></div>

Properly position two DIVs - One as a fixed sidebar, and other as expanding

I have updated html code by moving modal code outside of container class.

I have used position:sticky on sidebar class and assign height:100vh. so that it would not scroll if main content height is bigger than 100vh.

I have also added dummy book-add div to create more height of main content.

View results in full screen and only first add button will work.

// Declare the Object constructor.
function Book(title, author, pages, isbn, read, bookURL) {
  this.title = title;
  this.author = author;
  this.pages = pages;
  this.isbn = isbn;
  this.read = read;
  this.bookURL = bookURL;
}

Book.prototype.toggleStatus = function () {
  if (this.read == 'Read') {
    this.read = 'Not Read';
    return 1;
  } else if (this.read == 'Not Read') {
    this.read = 'Reading';
    return 2;
  } else if (this.read == 'Reading') {
    this.read = 'Read';
    return 3;
  }
}

// Initalize library variables.
let myLibrary = [];
const container = document.querySelector('.books-container');

// Display and Hide the "Add a Book" form.
const popup = document.querySelector('.form-popup');
const addBtn = document.querySelector('.add-btn');
const cancelBtn = document.getElementById('cancel-btn');

addBtn.addEventListener('click', function () {
  popup.style.display = 'block'; // Show
})

cancelBtn.addEventListener('click', function () {
  popup.style.display = 'none'; // Hide
})

// #### Book Form Start 
// ##

// Get the form values
const form = document.getElementById('form1');

form.addEventListener('submit', function (event) {
  const title = document.forms[0].elements[1].value;
  const author = document.forms[0].elements[2].value;
  const pages = document.forms[0].elements[3].value;
  const isbn = document.forms[0].elements[4].value;
  const bookURL = document.forms[0].elements[0].value;
  // Check which radio button has been selected.
  let read = '';
  if (document.getElementById('read').checked) {
    read = 'Read';
  } else if (document.getElementById('unread').checked) {
    read = 'Not Read';
  } else {
    read = 'Reading';
  }

  // Prevent page from refreshing and closing the form popup.
  event.preventDefault();
  popup.style.display = 'none';

  // Add our book.
  addBookToLibrary(title, author, pages, isbn, read, bookURL);

  // Display the books and reset the form.
  render();
  form.reset();

})

// Display our cover preview. 
const cover = document.querySelector('.cover-preview');
const isbnField = document.getElementById('isbn'); // In case ISBN has been typed
const coverURL = document.getElementById('url'); // In case URL has been used.

coverURL.addEventListener('change', function () {
  cover.style.background = `url(${document.forms[0].elements[0].value})`;
  cover.style.backgroundSize = 'cover';
})

isbnField.addEventListener('change', function () {
  if (document.forms[0].elements[0].value == '') { // URL takes preference as it's chosen by user.
    cover.style.background = `url(http://covers.openlibrary.org/b/isbn/${document.forms[0].elements[4].value}-M.jpg)`;
    cover.style.backgroundSize = 'cover';
  }
})

// Add a given book to myLibrary array
function addBookToLibrary(title, author, pages, isbn, read, bookURL) {
  let book = new Book(title, author, pages, isbn, read, bookURL);
  myLibrary.push(book);
}

// ##
// #### Book Form End

// Display the books in our HTML

function render() {

  // Clear our space first.
  const existingDivs = document.querySelectorAll('[data-book]');
  existingDivs.forEach((div) => {
    div.remove();
  });

  for (let i = 0; i < myLibrary.length; i++) {
    let element = document.createElement('div');
    element.classList.add('book');
    // Determine our cover. URL overrides ISBN.
    if (myLibrary[i]['bookURL']) {
      element.style.background = `url(${myLibrary[i]['bookURL']})`;
    } else {
      element.style.background = `url(http://covers.openlibrary.org/b/isbn/${myLibrary[i]['isbn']}-M.jpg)`;
    }
    element.style.backgroundSize = 'cover';
    element.setAttribute("data-book", i);

    // Create our mouse enter divs to display book information.
    let infoDiv = document.createElement('div');
    infoDiv.classList.add('book-info');
    infoDiv.style.display = 'none'; // Set to not display by deafult until mouse enter.
    let titleDiv = document.createElement('div');
    titleDiv.classList.add('info-title');
    titleDiv.textContent = myLibrary[i]['title'];
    let authorDiv = document.createElement('div');
    authorDiv.classList.add('info-author');
    authorDiv.textContent = `by ${myLibrary[i]['author']}`;
    let pagesDiv = document.createElement('div');
    pagesDiv.classList.add('info-pages');
    pagesDiv.textContent = `Pages: ${myLibrary[i]['pages']}`;

    // Create our status buttons and our delete button.
    let buttonsDiv = document.createElement('div');
    buttonsDiv.classList.add('info-buttons');
    let readTag = document.createElement('button');
    readTag.classList.add('button-status');
    readTag.setAttribute('data-bookstatus', i);

    if (myLibrary[i]['read'] == 'Read') {
      readTag.style.background = '#EBFFE5';
      readTag.textContent = '✔';
    } else if (myLibrary[i]['read'] == 'Not Read') {
      readTag.style.background = '#FFC1B1';
      readTag.textContent = '❌';
    } else {
      readTag.style.background = '#FFFFEA';
      readTag.textContent = '';
    }

    let removeTag = document.createElement('button');
    removeTag.classList.add('button-status');
    removeTag.textContent = '';
    removeTag.setAttribute("data-bookremove", i);

    // Add everything together
    buttonsDiv.appendChild(readTag);
    buttonsDiv.appendChild(removeTag);
    infoDiv.appendChild(titleDiv);
    infoDiv.appendChild(authorDiv);
    infoDiv.appendChild(pagesDiv);
    infoDiv.appendChild(buttonsDiv);
    element.appendChild(infoDiv);

    // Insert the finished product
    container.insertBefore(element, container.firstChild);
  }

  // Display book information on mouseover
  const bookFrames = Array.from(document.querySelectorAll('.book'));

  bookFrames.forEach((bookFrame) => {
    bookFrame.addEventListener('mouseenter', function (e) {
      bookFrame.firstChild.style.display = 'block';
    });
  });

  bookFrames.forEach((bookFrame) => {
    bookFrame.addEventListener('mouseleave', function (e) {
      bookFrame.firstChild.style.display = 'none';
    });
  });

  // Add functionality to our status and delete buttons

  const statusButtons = Array.from(document.querySelectorAll('button[data-bookstatus'));
  statusButtons.forEach((button) => {
    button.addEventListener('click', function () {
      let index = button.getAttribute('data-bookstatus');
      let x = myLibrary[index].toggleStatus();

      switch (x) {
        case 1:
          button.style.background = '#FFC1B1';
          button.textContent = '❌';
          break;
        case 2:
          button.style.background = '#FFFFEA';
          button.textContent = '';
          break;
        case 3:
          button.style.background = '#EBFFE5';
          button.textContent = '✔';
          break;

      }
    });
  });

  //Remove button
  const removeButtons = Array.from(document.querySelectorAll('button[data-bookremove]'));
  removeButtons.forEach((button) => {
    button.addEventListener('click', function () {
      let index = button.getAttribute('data-bookremove');
      const bookToRemove = document.querySelector(`div[data-book='${index}']`);
      bookToRemove.remove();  // Remove it from the DOM.
      myLibrary.splice(index, 1); //  Remove it from our array so it does not render again.
    });
  });

}

@import url("https://fonts.googleapis.com/css?family=Special Elite&display=swap");

html,
body {
  height: 100%;
  margin: 0;
  font-family: "Special Elite";
}

.container {
  width: 100%;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
}

.sidebar {
  position: sticky;
  top: 0%;
  left: 0%;
  background-color: #fff5ba;
  width: 200px;
  height:100vh;
}

.main {
  background-color: rgba(248, 248, 248, 1);
  flex-grow: 1;
}

.books-container {
  background-color: rgba(248, 248, 248, 1);
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 10%;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  flex-wrap: wrap;
}

.book {
  width: 200px;
  height: 300px;
  margin: 50px 25px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  box-shadow: 3px 3px 5px 0px black;
}

.book-info {
  background-color: rgba(0, 0, 0, 0.6);
  width: 200px;
  height: 300px;
}

.info-title {
  position: relative;
  top: 15%;
  color: white;
  font-size: 20px;
  text-align: center;
  text-shadow: 3px 3px 1px black;
}

.info-author {
  position: relative;
  top: 20%;
  color: white;
  font-size: small;
  font-style: italic;
  text-align: center;
  text-shadow: 1px 1px 1px black;
}

.info-pages {
  position: relative;
  top: 23%;
  color: #fff5ba;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  text-shadow: 1px 1px 1px black;
}

.info-buttons {
  position: relative;
  top: 40%;
  left: 20%;
}

.button-status {
  width: 50px;
  height: 50px;
  outline: none;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50px;
  margin-left: 5px;
  box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.8);
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 25px;
}

.button-status:hover {
  transform: scale(1.1);
}

.book-add {
  width: 200px;
  height: 300px;
  margin: 50px 25px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  box-shadow: 3px 3px 5px 0px black;
}

.add-btn {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  background: inherit;
  outline: none;
  border-radius: 100px;
  font-size: 4em;
}

.add-btn:hover {
  background-color: #fff5ba;
}

.cover {
  width: 200px;
  height: 300px;
}

.cover-preview-container {
  position: absolute;
  right: 10%;
  text-align: center;
}

.cover-preview {
  width: 100px;
  height: 150px;
  border: 1px solid black;
  position: relative;
  left: 30%;
  margin-bottom: 10px;
  margin-top: 5px;
}

.form-popup {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
}

.book-form-container {
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 50%;
  top: 50%;
  width: 500px;
  height: 500px;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background-color: #836953;
  border: 1px solid black;
  border-radius: 5px;
}

.form-header {
  position: absolute;
  top: 0px;
  background: url(assets/books.jpeg);
  background-size: cover;
  width: 500px;
  height: 150px;
  border-bottom: 1px solid black;
  font-size: 4em;
  text-align: center;
  color: white;
  text-shadow: 3px 3px 1px black;
}

.form-footer {
  position: absolute;
  bottom: 0px;
  background: url(assets/wood.jpeg);
  background-size: cover;
  width: 500px;
  height: 150px;
  border-bottom: 1px solid black;
  font-size: 4em;
  text-align: center;
  color: white;
  text-shadow: 3px 3px 1px black;
}

.book-form {
  position: absolute;
  top: 150px;
  bottom: 150px;
  width: 500px;
  padding: 20px;
  line-height: 20px;
  background-color: #fff5ba;
}

.entry-box {
  height: 20px;
  border-radius: 5px;
  outline: none;
  background-color: rgba(240, 240, 240, 0.5);
  margin-bottom: 15px;
}

.form-btn {
  margin: 40px 40px;
  width: 100px;
  height: 50px;
  border: 1px solid white;
  border-radius: 10px;
  background: inherit;
  color: white;
  font-family: inherit;
  font-size: 20px;
  box-shadow: 3px 3px 1px 1px black;
  outline: none;
}

.form-btn:hover {
  transform: scale(1.1);
}

<div class="container">

  <div class="sidebar">
    <div class="my-library">My Library</div>
    <div class="menu">Home</div>
  </div>

  <div class="main">
    <div class="books-container">
      <div class="book-add">
        <button class="add-btn">+</button>

      </div>
      <div class="book-add">
        <button class="add-btn">+</button>

      </div>
      <div class="book-add">
        <button class="add-btn">+</button>

      </div>
      <div class="book-add">
        <button class="add-btn">+</button>

      </div>
      <div class="book-add">
        <button class="add-btn">+</button>

      </div>
      <div class="book-add">
        <button class="add-btn">+</button>

      </div>
      <div class="book-add">
        <button class="add-btn">+</button>

      </div>
      <div class="book-add">
        <button class="add-btn">+</button>

      </div>
    </div>
  </div>
</div>

<div class="form-popup">
  <div class="book-form-container">

    <div class="form-header"><br />Add a Book</div>
    <div class="book-form">
      <form id="form1">
        <div class="cover-preview-container">Cover
          <div class="cover-preview"></div>
          <div><span style="font-size: small">Or enter the link to the cover image:</span> <br /><input class="entry-box" id="url" type="url" placeholder="https://"></div>
        </div>
        <div>
          <label for="title"> Title </label><br />
          <input class="entry-box" type="text" id="title" name="title" placeholder="Enter the book title." required>
        </div>
        <div>
          <label for="author"> Author</label><br />
          <input class="entry-box" type="text" id="author" name="author" placeholder="Enter the Author." required>
        </div>
        <div>
          <label for="pages"> Pages</label><br />
          <input class="entry-box" type="number" id="pages" name="pages" min="1" placeholder="0" required>
        </div>
        <div>
          <label for="isbn"> ISBN <span style="font-size: small"><i><sup>what is this?</sup></i></span></label><br />
          <input class="entry-box" type="text" id="isbn" name="isbn" placeholder="(optional)">
        </div>
        <div style="text-align: center">
          <label for="read">Read</label>
          <input id="read" type="radio" name="status" value="read" required>
          <label for="unread">Not Read</label>
          <input id="unread" type="radio" name="status" value="unread" required>
          <label for="reading">Reading</label>
          <input id="reading" type="radio" name="status" value="reading" required>
        </div>
      </form>
    </div>

    <div class="form-footer">
      <button id="form-add-btn" type="submit" class="form-btn" form="form1">Add</button>
      <button id="cancel-btn" class="form-btn">Cancel</button>
    </div>
  </div>

</div>

Div extending far outside modal, want it to stay inside and scroll

I solved this issue (with help from an online friend) over the course of a few hours, allow me to share the insight gained.

Essentially, flex is the way to go here. We need flex in the pane to keep the button on the bottom while the images take up the remaining space with scrolling overflow. We should also make enclosing divs have a height of 100% (.tab-content, .card-body).

When we get to the .card itself is where things get tricky. We want it to fill the parent, but applying h-100 here is not acceptable since it has a sibling, its height shouldn't be 100% of the parent content area, but rather 100% - height of the .nav-wrapper. It's close to what we want, but not quite.

Seems like we need another flex here to allow the .card to grow just into the remaining space, but if you set the flex here, it is not respected and the card extends way outside of the modal. The secret sauce is that by default, the .card with .d-flex is getting min-height:auto, and what this means is that it will not shrink smaller than the size of its content. Setting min-height:0 on the div.card solves the problem. Since I do not see any Bootstrap utility to do this, I've added one myself globally for this purpose to use in the future as well.

.d-flex > .flex-shrink-content {
  min-height: 0;
}

The full code / demo can be found here for those interested:
Codepen

<div class="modal modal-base">
  <div class="modal-overlay"></div>
  <div class="modal-window">
    <div class="close">×</div>
    <div class="modal-content d-flex flex-column">
      <div class="nav-wrapper flex-grow-1">
        <ul class="nav nav-pills flex-row" role="tablist">
          <li class="nav-item">
            <a class="nav-link mb-3 active" href="#" role="tab">Image List</a>
          </li>
          <li class="nav-item">
            <a class="nav-link mb-3" href="#" role="tab">Upload</a>
          </li>
        </ul>
      </div>
      <div class="card flex-shrink-content shadow">
        <div class="card-body h-100">
          <div class="tab-content h-100">
            <div class="tab-pane fade show active d-flex flex-column h-100" role="tabpanel">
              <div class="row flex-grow-1 overflow-auto">
                <div class="col-6 mb-2">
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
                </div>
                <div class="col-6 mb-2">
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
                </div>
                <div class="col-6 mb-2">
                  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Terrier_mixed-breed_dog.jpg/1024px-Terrier_mixed-breed_dog.jpg" class="img-thumbnail">
                </div>
              </div>
              <button type="button" class="btn btn-primary w-100 btn-lg mt-2">Insert</button>
            </div>
            <div class="tab-pane fade h-100" role="tabpanel">
              <div class="upload-widget"></div>
              <div class="text-center mt-2">
                <button type="button" class="btn btn-primary">Upload</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.modal {
  &.modal-base {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &-overlay {
    position: absolute;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }

  &-window {
    background: #fff;
    border-radius: 4px;
    margin: auto;
    position: relative;
    width: 400px;
    height: 300px;
    z-index: 2001;

    .close {
      position: absolute;
      right: 2px;
      top: 2px;
      color: gray;
      font-size: 25px;
      z-index: 2002;
    }

  }

  &-content {
    width: 100%;
    height: 100%;
    padding: 20px;
  }
  
}

.d-flex > .flex-shrink-content {
  min-height: 0;
}

Fixed Positioned Div Is Extending Outside of HTML & Body