Question

我一直在到处寻找这个问题的答案，但是我还没有找到答案。

我有一个页面，该页面的顶部带有导航栏。我希望其余内容能够完美地填充页面，但相反，它向下和向右重叠，从而导致滚动条。

我也不确定如何将side div与main div分开。我目前使用的是左边距as W3C does，但是这感觉很混乱，每当填充更改时都必须更改。

我不希望任何元素都具有固定的位置。

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>

谢谢您的帮助！

Answer 1

尝试这个小提琴。希望这就是您要寻找的

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;
}

Answer 2

如果将#sidenav和#main设置为height:80vh（视口高度），将#topnav设置为height:20vh（可以将其更改为（如果您愿意），那么它将覆盖您页面的其余部分。

此外，我对HTML / CSS进行了小幅修改，以包含display:flex，这样您就不必在margin-left上添加#main。

尝试一下：

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

完成。您只需要在overflow: hidden;标记中添加一个html, body。

    *, *::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

height: 100%代表页面的高度，当您拥有顶部栏时，通常您的内容大于页面，然后出现滚动条。

您应该改用height: calc(100% - <height-of-your-top-bar>);。您也可以使用vh单位。

您也可以使用CSS Grid，它非常适合这种情况。

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 5

对CSS进行了一些修改，并确保填充不会影响元素的宽度和高度，您可以使用以下代码：

1040/19-02-2019/1042/19-02-2019

Answer 6

我尝试了另一种方式。

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>

CSS：使用导航栏将div的大小调整为页面

6 个答案: