CSS: Size divs to page with navigation bar

Question

I have been looking everywhere for an answer to this problem, but I haven't found one yet.

I have a page with a navigation bar at the top. I want the rest of the content to fill the page perfectly, but instead it overlaps downward and to the right, leading to scrollbars.

I am also unsure of how to separate the side div from the main div. I am currently using margin-left as W3C does, but this feels awfully messy, and has to be altered whenever the padding is changed.

I do not want any elements to have a fixed position if possible.

html, body {
	margin: 0;
	padding: 0;
}

#topnav {
	background-color: #00FF00;
	border-bottom: 2px solid black;
	overflow: hidden;
}

#sidenav {
	background-color: #FFFF00;
	border-right: 1px solid black;
	display: inline-block;
	height: 100%;
	overflow: scroll;
	padding: 8px;
	position: absolute;
	width: 200px;
}

#main {
	background-color: #FF00FF;
	display: inline-block;
	height: 100%;
	margin-left: 217px;
	padding: 8px;
	position: absolute;
	width: 100%;
	word-break: break-word;
}

<div id="topnav">
	<span>Top Navigator</span>
</div>
<div id="sidenav">
	<span>Side Navigator</span>
</div>
<div id="main">
	<span>Main Area</span>
</div>

Thank you for any help!

Answer 1

I tried another way.

const topnav_height = document.querySelector("#topnav").offsetHeight;

const parent = document.querySelector(".parent");

parent.style.height = "calc(100% - " + topnav_height + "px)";

html, body {
	margin: 0;
	padding: 0;
  height:100%;
}

* {
  box-sizing:border-box;
}

#topnav {
	background-color: #00FF00;
	border-bottom: 2px solid black;
	width:100%;
}

.parent {
  display:flex;
  height:100%;
}

#sidenav {
	background-color: #FFFF00;
	border-right: 1px solid black;
	height: 100%;
	overflow: scroll;
	padding: 8px;
  flex:1;
}

#main {
	background-color: #FF00FF;
	height: 100%;
	padding: 8px;
	word-break: break-word;
  flex:2;
}

<div id="topnav">
	<span>Top Navigator</span>
</div>
<div class="parent">
<div id="sidenav">
	<span>Side Navigator</span>
</div>
<div id="main">
	<span>Main Area</span>
</div>
</div>

Answer 2

If you set your #sidenav and #main to be height:80vh(viewport height) and your #topnav to be height:20vh(you can change this to what ever you like), then it will span the rest of your page.

Also, i have amended your HTML/CSS slightly to include display:flex, so that you dont have to add margin-left to your #main.

Try this:

html,
body {
  margin: 0;
  padding: 0;
}

#topnav {
  background-color: #00FF00;
  width: 100%;
  height: 100px;
  border-bottom: 2px solid black;
}

.content {
  display: flex;
  height: calc(100vh - 102px);
}

#sidenav {
  background-color: #FFFF00;
  border-right: 1px solid black;
  width: 25%;
  overflow-y: scroll;
}

#main {
  background-color: #FF00FF;
  width: 75%;
  overflow-y: scroll;
}

<div id="topnav">
  <span>Top Navigator</span>
</div>
<div class="content">
  <div id="sidenav">
    <span>Side Navigator</span>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum felis vitae venenatis rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer tincidunt egestas ipsum, eu suscipit arcu condimentum
      quis. Donec vestibulum leo et turpis lobortis mattis nec quis velit. Etiam a libero cursus, placerat sem eget, pulvinar diam. Nullam commodo tortor nulla, vel eleifend est semper non. Morbi sit amet sapien lectus. Pellentesque mattis ultrices velit
      sit amet eleifend. Sed dignissim euismod nulla ut tincidunt. Nulla placerat enim libero, non aliquet purus dignissim sed. Mauris pharetra, mi non tincidunt feugiat, lectus tellus consectetur sapien, eu pharetra elit tellus et tellus. Nulla facilisi.
      Duis sapien metus, interdum in porttitor at, vehicula quis felis. Nullam aliquet eget eros quis rutrum. Nunc vitae nulla interdum, viverra ante id, elementum ex. Integer aliquet nisl eget eros mattis, vel porta lorem hendrerit. Fusce ante ligula,
      tincidunt ac iaculis nec, interdum eu purus. Mauris id sagittis urna. Ut id erat dui. Sed sit amet venenatis dolor. Pellentesque faucibus ex a leo feugiat, eu faucibus sem dapibus. Nullam ornare ex nec nisi vestibulum, et pellentesque purus bibendum.
      Curabitur eu feugiat urna, nec tempor tellus. Fusce tempus mi ut tristique aliquet. Ut vitae augue a magna lacinia suscipit. Phasellus pulvinar facilisis ultricies. Nullam ultrices, tortor in efficitur consequat, ipsum urna gravida nisi, at tincidunt
      eros ante id urna. Phasellus euismod porttitor lectus, id tincidunt neque facilisis in. Praesent condimentum rutrum porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </p>
  </div>
  <div id="main">
    <span>Main Area</span>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur elementum felis vitae venenatis rutrum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer tincidunt egestas ipsum, eu suscipit arcu condimentum
      quis. Donec vestibulum leo et turpis lobortis mattis nec quis velit. Etiam a libero cursus, placerat sem eget, pulvinar diam. Nullam commodo tortor nulla, vel eleifend est semper non. Morbi sit amet sapien lectus. Pellentesque mattis ultrices velit
      sit amet eleifend. Sed dignissim euismod nulla ut tincidunt. Nulla placerat enim libero, non aliquet purus dignissim sed. Mauris pharetra, mi non tincidunt feugiat, lectus tellus consectetur sapien, eu pharetra elit tellus et tellus. Nulla facilisi.
      Duis sapien metus, interdum in porttitor at, vehicula quis felis. Nullam aliquet eget eros quis rutrum. Nunc vitae nulla interdum, viverra ante id, elementum ex. Integer aliquet nisl eget eros mattis, vel porta lorem hendrerit. Fusce ante ligula,
      tincidunt ac iaculis nec, interdum eu purus. Mauris id sagittis urna. Ut id erat dui. Sed sit amet venenatis dolor. Pellentesque faucibus ex a leo feugiat, eu faucibus sem dapibus. Nullam ornare ex nec nisi vestibulum, et pellentesque purus bibendum.
      Curabitur eu feugiat urna, nec tempor tellus. Fusce tempus mi ut tristique aliquet. Ut vitae augue a magna lacinia suscipit. Phasellus pulvinar facilisis ultricies. Nullam ultrices, tortor in efficitur consequat, ipsum urna gravida nisi, at tincidunt
      eros ante id urna. Phasellus euismod porttitor lectus, id tincidunt neque facilisis in. Praesent condimentum rutrum porta. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </p>
  </div>

</div>

Answer 3

Done. You just needed to add a overflow: hidden; in your html, body tag.

    *, *::before, *::after {
    box-sizing: border-box;
}
html, body {
	margin: 0;
	padding: 0;
  overflow: hidden;
}

#topnav {
	background-color: #00FF00;
	border-bottom: 2px solid black;
	overflow: hidden;
  width:100%
}

#sidenav {
	background-color: #FFFF00;
	border-right: 1px solid black;
	display: inline-block;
	height: 100%;
	overflow: scroll;
	position: absolute;
	padding: 8px;
	width: 300px;
  overflow: scroll;
}

#main {
	background-color: #FF00FF;
	display: inline-block;
	height: 100%;
	margin-left: 300px;
	padding: 8px;
	position: absolute;
	width: calc(100% - 300px);
	word-break: break-word;
  overflow: scroll;
}

<div id="topnav">
	<span>Top Navigator</span>
</div>
<div id="sidenav">
	<span>Side Navigator</span>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem asperiores doloremque similique nulla atque illum tempora aperiam placeat doloribus cupiditate provident fugit unde, vitae suscipit amet dolor sunt excepturi ullam incidunt tenetur. Saepe laudantium facere perspiciatis voluptatem earum fuga sequi. Veniam aliquid ipsam enim nobis natus maxime blanditiis, beatae iusto illo numquam. Repellat, impedit quia quas sequi velit ipsa exercitationem earum illo corrupti id veniam dolore magni recusandae similique numquam in minus autem perspiciatis natus voluptatibus libero laudantium animi voluptas ullam! Nobis deserunt, iusto hic doloribus alias quos nulla obcaecati! Reiciendis, debitis quibusdam deleniti reprehenderit dolore cum ipsam sint eum. Possimus quae sed enim, molestiae, vel ratione cum ipsam explicabo odit, id nihil aut nam! Qui tempora vitae temporibus dolore voluptatibus dolor laboriosam et reiciendis necessitatibus doloribus, voluptas error labore repellendus repellat minus. Amet quae qui incidunt ipsum unde, mollitia culpa accusantium repellat aspernatur pariatur aliquid ipsa consequatur at quam maxime nesciunt eius fugit beatae. Animi officia quos placeat fugit voluptatibus quibusdam earum! Amet illo, deleniti magni aspernatur facere dolorum eum, quaerat quos laborum aliquam nulla perspiciatis error pariatur harum necessitatibus! Ullam perferendis ex sequi amet quis neque? Ducimus porro quaerat et, dolorum mollitia officiis animi qui, est error quibusdam ut maxime dicta aperiam veniam sunt eaque deleniti praesentium facere natus ea expedita? Dolore aperiam quo, nesciunt commodi temporibus facilis veniam modi dolores vero consectetur, ratione officia sed inventore repellendus tempore? Natus ullam non voluptatem magni. Rerum alias veniam, distinctio numquam nihil minus laudantium accusamus? Tempore unde doloribus rerum ipsum excepturi nostrum non, aperiam at velit ipsa fuga maiores rem sint repellat dolorem. Iste animi illum, iure, ea qui voluptatum illo unde vero sequi error voluptatibus quibusdam corrupti quidem. Harum natus, ratione, fuga, voluptate iure nam eligendi quos sapiente magni a nulla ut! Suscipit dolorum aliquam tempora reprehenderit ratione placeat esse pariatur soluta iusto. Perferendis laborum eligendi numquam et blanditiis molestiae explicabo modi deleniti earum. Porro deserunt laborum deleniti excepturi accusantium similique. Animi, saepe consequatur? Eveniet eligendi adipisci similique error molestias animi repellendus porro iure reiciendis modi exercitationem ab, ratione perferendis quod ea quasi! Repellendus, ipsa veniam. Ducimus, possimus, sit quae explicabo blanditiis atque tenetur praesentium consequuntur labore ab architecto tempore distinctio nulla! Architecto excepturi molestiae sit nihil ipsa. Blanditiis cumque praesentium itaque quibusdam dolores ad accusantium quia, omnis eveniet ipsam maxime pariatur, quis debitis ea exercitationem quod libero perspiciatis nobis quam iste? Distinctio saepe nihil blanditiis optio maxime? Animi delectus laboriosam dignissimos architecto nesciunt, necessitatibus incidunt dolores, ex cumque voluptatum facere earum expedita iure dolor omnis voluptate consequatur repellendus nisi reiciendis. Aperiam, commodi dolorem. Cum eligendi at dolorem iste, dolores delectus. Laboriosam, amet eligendi itaque delectus reprehenderit tempora sequi illo molestias totam doloribus rem laborum quas maxime quos error cum, nostrum in similique omnis veniam laudantium odit? Animi non ratione blanditiis distinctio suscipit quibusdam fuga, ab ducimus reprehenderit nobis possimus cupiditate iste earum cum tempore sint minus sequi ipsum. Iusto vel enim soluta aliquid facere sed, sint optio eos repellendus mollitia aperiam iure assumenda illo veniam saepe deleniti dolore.
</div>
<div id="main">
	<span>Main Area</span>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem asperiores doloremque similique nulla atque illum tempora aperiam placeat doloribus cupiditate provident fugit unde, vitae suscipit amet dolor sunt excepturi ullam incidunt tenetur. Saepe laudantium facere perspiciatis voluptatem earum fuga sequi. Veniam aliquid ipsam enim nobis natus maxime blanditiis, beatae iusto illo numquam. Repellat, impedit quia quas sequi velit ipsa exercitationem earum illo corrupti id veniam dolore magni recusandae similique numquam in minus autem perspiciatis natus voluptatibus libero laudantium animi voluptas ullam! Nobis deserunt, iusto hic doloribus alias quos nulla obcaecati! Reiciendis, debitis quibusdam deleniti reprehenderit dolore cum ipsam sint eum. Possimus quae sed enim, molestiae, vel ratione cum ipsam explicabo odit, id nihil aut nam! Qui tempora vitae temporibus dolore voluptatibus dolor laboriosam et reiciendis necessitatibus doloribus, voluptas error labore repellendus repellat minus. Amet quae qui incidunt ipsum unde, mollitia culpa accusantium repellat aspernatur pariatur aliquid ipsa consequatur at quam maxime nesciunt eius fugit beatae. Animi officia quos placeat fugit voluptatibus quibusdam earum! Amet illo, deleniti magni aspernatur facere dolorum eum, quaerat quos laborum aliquam nulla perspiciatis error pariatur harum necessitatibus! Ullam perferendis ex sequi amet quis neque? Ducimus porro quaerat et, dolorum mollitia officiis animi qui, est error quibusdam ut maxime dicta aperiam veniam sunt eaque deleniti praesentium facere natus ea expedita? Dolore aperiam quo, nesciunt commodi temporibus facilis veniam modi dolores vero consectetur, ratione officia sed inventore repellendus tempore? Natus ullam non voluptatem magni. Rerum alias veniam, distinctio numquam nihil minus laudantium accusamus? Tempore unde doloribus rerum ipsum excepturi nostrum non, aperiam at velit ipsa fuga maiores rem sint repellat dolorem. Iste animi illum, iure, ea qui voluptatum illo unde vero sequi error voluptatibus quibusdam corrupti quidem. Harum natus, ratione, fuga, voluptate iure nam eligendi quos sapiente magni a nulla ut! Suscipit dolorum aliquam tempora reprehenderit ratione placeat esse pariatur soluta iusto. Perferendis laborum eligendi numquam et blanditiis molestiae explicabo modi deleniti earum. Porro deserunt laborum deleniti excepturi accusantium similique. Animi, saepe consequatur? Eveniet eligendi adipisci similique error molestias animi repellendus porro iure reiciendis modi exercitationem ab, ratione perferendis quod ea quasi! Repellendus, ipsa veniam. Ducimus, possimus, sit quae explicabo blanditiis atque tenetur praesentium consequuntur labore ab architecto tempore distinctio nulla! Architecto excepturi molestiae sit nihil ipsa. Blanditiis cumque praesentium itaque quibusdam dolores ad accusantium quia, omnis eveniet ipsam maxime pariatur, quis debitis ea exercitationem quod libero perspiciatis nobis quam iste? Distinctio saepe nihil blanditiis optio maxime? Animi delectus laboriosam dignissimos architecto nesciunt, necessitatibus incidunt dolores, ex cumque voluptatum facere earum expedita iure dolor omnis voluptate consequatur repellendus nisi reiciendis. Aperiam, commodi dolorem. Cum eligendi at dolorem iste, dolores delectus. Laboriosam, amet eligendi itaque delectus reprehenderit tempora sequi illo molestias totam doloribus rem laborum quas maxime quos error cum, nostrum in similique omnis veniam laudantium odit? Animi non ratione blanditiis distinctio suscipit quibusdam fuga, ab ducimus reprehenderit nobis possimus cupiditate iste earum cum tempore sint minus sequi ipsum. Iusto vel enim soluta aliquid facere sed, sint optio eos repellendus mollitia aperiam iure assumenda illo veniam saepe deleniti dolore.
</div>

Answer 4

Making a few modifications to the CSS and ensuring that your paddings does not affect the width and height of the elements, you can use the following:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#topnav {
    width: 100%;
    height: 56px;
    background-color: #00FF00;
    border-bottom: 2px solid black;
    overflow: hidden;
}

#sidenav {
    background-color: #FFFF00;
    border-right: 1px solid black;
    display: inline-block;
    height: calc(100% - 56px);
    overflow: scroll;
    padding: 8px;
    position: absolute;
    width: 200px;
}

#main {
    background-color: #FF00FF;
    display: inline-block;
    height: calc(100% - 56px);
    margin-left: 200px;
    padding: 8px;
    position: absolute;
    width: calc(100% - 200px);
    word-break: break-word;
}

Answer 5

height: 100% represent the height of your page, and as you have your top bar, it is normal that your content is bigger than your page and then that scrollbars appears.

You should use height: calc(100% - <height-of-your-top-bar>); instead. You can also use the vh unit.

---

You also could use CSS Grid which is perfect for this case.

body {
  display: grid;
  grid-template-rows: 80px calc(100vh - 80px);
  grid-template-columns: 200px auto;
}

#top {
  grid-column: 1 / span 2;
  
  background-color: green;
}

#side {
  background-color: red;
}

#main {
  background-color: blue;
}

<div id="top"></div>
<div id="side"></div>
<div id="main"></div>

Answer 6

Try this fiddle. Hope this is what you are looking for

Try this

*, *::before, *::after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}

#topnav {
background-color: #00FF00;
border-bottom: 2px solid black;
overflow: hidden;
width:100%
}

#sidenav {
background-color: #FFFF00;
border-right: 1px solid black;
display: inline-block;
height: 100%;
overflow: scroll;
position: absolute;
padding: 8px;
width: 300px;
}

#main {
background-color: #FF00FF;
display: inline-block;
height: 100%;
margin-left: 300px;
padding: 8px;
position: absolute;
width: calc(100% - 300px);
word-break: break-word;
}