在容器中创建div占用空间的100％

时间：2018-01-04 20:00:24

标签： html css overflow

这是我的问题：https://jsfiddle.net/oa2b4cr9/ 

#nav{
max-width: 200px;
min-width: 200px;
float: left;
background-color: #CBDDE6;
border-right: 1px solid black;
padding-top: 15px;
}

#nav img{
    padding-bottom: 10px;
}

#pagecontent{
    border-left: 10px;
    max-width: 565px;
    min-width: 565px;
    float: right;
    padding-top: 10px;
    display: block;
}

我希望两个条形填充从页面顶部到底部的间隙。我在过去的几个小时里一直在研究，这让我有点生气！我试过了： 将display：table添加到相关元素中 将两列的最小/最大/高度设置为100％，并将容器推过页脚。 添加清晰：在两个列下都有 将溢出设置为隐藏 将页脚的位置设置为相对而不是绝对。

如果有人可以提供帮助，我会非常感激。

2 个答案:

答案 0 :(得分：0)

在包含元素height上声明#content属性，例如：

#content{
  /* additional */
    height: 100%;
}

然后在嵌套的height元素上声明#nav属性，例如：

#nav{
  /* additional */
  height: 100%;
}

代码段示范： 

body,
html {
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-family: "Arial";
  font-size: 12px;
  height: 100%
}

body {
  background-color: #E2EEDA;
}

#container {
  height: 100%;
  width: 100%;
}

#topbar {
  height: 100px;
  background-color: #CBCADA;
  border-bottom: 2px solid black;
}

#header {
  max-width: 775px;
  min-width: 775px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: #CBCADA;
}

#content {
  max-width: 775px;
  min-width: 775px;
  margin-left: auto;
  margin-right: auto;
  background-color: #E2EEDA;
  padding: 0px;
  /* additional */
  height: 100%;
}

#nav {
  max-width: 200px;
  min-width: 200px;
  float: left;
  background-color: #CBDDE6;
  border-right: 1px solid black;
  padding-top: 15px;
  /* additional */
  height: 100%;
  padding-bottom: 20px;
}

#nav img {
  padding-bottom: 10px;
}

#pagecontent {
  border-left: 10px;
  max-width: 565px;
  min-width: 565px;
  float: right;
  padding-top: 10px;
  display: block;
  /* additional */
  padding-bottom: 50px;
  /* offset footer height */
}

#footerbar {
  height: 50px;
  width: 100%;
  background-color: #CBCADA;
  position: fixed;
  /* updated */
  bottom: 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

#footercontent {
  max-width: 775px;
  min-width: 775px;
  margin-left: auto;
  margin-right: auto;
  background-color: #CBCADA;
  padding: 0px;
  text-align: center;
}

h1 {
  font-size: 25px;
}
<html>

<head>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <div id="container">
    <div id="topbar">
      <div id="header">
        <img src="http://via.placeholder.com/370x100">
        <img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
      </div>
    </div>
    <div id="content">
      <div id="nav">
        <p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
      </div>
      <div id="pagecontent">
        <h1>Lorem Ipsum</h1>
        <img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
          commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
          et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
          euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
          urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
          Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
          Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
          rhoncus, tempus eu nibh.</p>

        <ul>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
        </ul>
        <p>
          Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>

      </div>

    </div>
    <div id="footerbar" ">
				<div id="footercontent ">
					<p>Sed sagittis ac ex sed facilisis.</p>
				</div>
			</div>
		</div>
	</body>
</html>

<强> Updated JSFiddle

此外：

  1. #footerbar元素已设置为position: fixed
  2. padding-bottom已在#pagecontent元素上声明 从正常文档中取出的页脚高度的帐户 流量

    3. <强>可替换地：

    1。 flex-box路线（检查浏览器兼容性）：

    body,
html {
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-family: "Arial";
  font-size: 12px;
  height: 100%
}

* {
  box-sizing: border-box;
}

body {
  background-color: #E2EEDA;
}

#container {
  height: 100%;
  width: 100%;
}

#topbar {
  height: 100px;
  background-color: #CBCADA;
  border-bottom: 2px solid black;
}

#header {
  max-width: 775px;
  min-width: 775px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: #CBCADA;
}

#content {
  max-width: 775px;
  min-width: 775px;
  margin-left: auto;
  margin-right: auto;
  background-color: #E2EEDA;
  padding: 0px;
  /* additional */
  display: flex;
}

#nav {
  max-width: 200px;
  min-width: 200px;
  float: left;
  background-color: #CBDDE6;
  border-right: 1px solid black;
  padding-top: 15px;
}

#nav img {
  padding-bottom: 10px;
}

#pagecontent {
  border-left: 10px;
  max-width: 565px;
  min-width: 565px;
  float: right;
  padding-top: 10px;
  display: block;
  /* additional */
  padding-bottom: 50px; /* offset footer height */
  padding-left: 15px;
}

#footerbar {
  height: 50px;
  width: 100%;
  background-color: #CBCADA;
  position: fixed;
  /* updated */
  bottom: 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

#footercontent {
  max-width: 775px;
  min-width: 775px;
  margin-left: auto;
  margin-right: auto;
  background-color: #CBCADA;
  padding: 0px;
  text-align: center;
}

h1 {
  font-size: 25px;
}
    <html>

<head>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <div id="container">
    <div id="topbar">
      <div id="header">
        <img src="http://via.placeholder.com/370x100">
        <img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
      </div>
    </div>
    <div id="content">
      <div id="nav">
        <p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
      </div>
      <div id="pagecontent">
        <h1>Lorem Ipsum</h1>
        <img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
          commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
          et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
          euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
          urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
          Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
          Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
          rhoncus, tempus eu nibh.</p>

        <ul>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
        </ul>
        <p>
          Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>

      </div>

    </div>
    <div id="footerbar" ">
				<div id="footercontent ">
					<p>Sed sagittis ac ex sed facilisis.</p>
				</div>
			</div>
		</div>
	</body>
</html>

    2。 absolute定位：

    body,
html {
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-family: "Arial";
  font-size: 12px;
  height: 100%
}

* {
  box-sizing: border-box;
}

body {
  background-color: #E2EEDA;
}

#container {
  height: 100%;
  width: 100%;
}

#topbar {
  height: 100px;
  background-color: #CBCADA;
  border-bottom: 2px solid black;
}

#header {
  max-width: 775px;
  min-width: 775px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: #CBCADA;
}

#content {
  max-width: 775px;
  min-width: 775px;
  margin-left: auto;
  margin-right: auto;
  background-color: #E2EEDA;
  padding: 0px;
  /* additional */
  position: relative;
}

#nav {
  max-width: 200px;
  min-width: 200px;
  float: left;
  background-color: #CBDDE6;
  border-right: 1px solid black;
  padding-top: 15px;
  /* additional */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

#nav img {
  padding-bottom: 10px;
}

#pagecontent {
  border-left: 10px;
  max-width: 565px;
  min-width: 565px;
  padding-top: 10px;
  display: block;
  /* additional */
  padding-bottom: 50px; /* offset footer height */    
  margin-left: 200px; /* offset sidebar nav width */
  padding-left: 20px;
}

#footerbar {
  height: 50px;
  width: 100%;
  background-color: #CBCADA;
  position: fixed;
  /* updated */
  bottom: 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

#footercontent {
  max-width: 775px;
  min-width: 775px;
  margin-left: auto;
  margin-right: auto;
  background-color: #CBCADA;
  padding: 0px;
  text-align: center;
}

h1 {
  font-size: 25px;
}
    <html>

<head>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <div id="container">
    <div id="topbar">
      <div id="header">
        <img src="http://via.placeholder.com/370x100">
        <img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
      </div>
    </div>
    <div id="content">
      <div id="nav">
        <p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
      </div>
      <div id="pagecontent">
        <h1>Lorem Ipsum</h1>
        <img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
          commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
          et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
          euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
          urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
          Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
          Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
          rhoncus, tempus eu nibh.</p>

        <ul>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
        </ul>
        <p>
          Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>

      </div>

    </div>
    <div id="footerbar" ">
				<div id="footercontent ">
					<p>Sed sagittis ac ex sed facilisis.</p>
				</div>
			</div>
		</div>
	</body>
</html>

    3。 伪元素：

    body,
html {
  margin: 0px;
  padding: 0px;
  border: 0px;
  font-family: "Arial";
  font-size: 12px;
  height: 100%
}

* {
  box-sizing: border-box;
}

body {
  background-color: #E2EEDA;
}

#container {
  height: 100%;
  width: 100%;
}

#topbar {
  height: 100px;
  background-color: #CBCADA;
  border-bottom: 2px solid black;
}

#header {
  max-width: 775px;
  min-width: 775px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  background-color: #CBCADA;
}

#content {
  max-width: 775px;
  min-width: 775px;
  margin-left: auto;
  margin-right: auto;
  background-color: #E2EEDA;
  padding: 0px;
  /* additional */
  position: relative;
}

/* start additional */
#content:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  max-width: 200px;
  min-width: 200px;
  background-color: #CBDDE6;
  border-right: 1px solid black;
  z-index: -1;
}
/* end additional */

#nav {
  max-width: 200px;
  min-width: 200px;
  float: left;
  padding-top: 15px;
}

#nav img {
  padding-bottom: 10px;
}

#pagecontent {
  border-left: 10px;
  float: right;
  max-width: 565px;
  min-width: 565px;
  padding-top: 10px;
  display: block;
  /* additional */
  padding-bottom: 50px; /* offset footer height */  
}

#footerbar {
  height: 50px;
  width: 100%;
  background-color: #CBCADA;
  position: fixed;
  /* updated */
  bottom: 0;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
}

#footercontent {
  max-width: 775px;
  min-width: 775px;
  margin-left: auto;
  margin-right: auto;
  background-color: #CBCADA;
  padding: 0px;
  text-align: center;
}

h1 {
  font-size: 25px;
}
    <html>

<head>
  <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
  <div id="container">
    <div id="topbar">
      <div id="header">
        <img src="http://via.placeholder.com/370x100">
        <img src="http://via.placeholder.com/370x100" width="192" height="40" border="0" style="float: right; position: relative; bottom: 0; ">
      </div>
    </div>
    <div id="content">
      <div id="nav">
        <p><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"><img src="http://via.placeholder.com/190x22"></p>
      </div>
      <div id="pagecontent">
        <h1>Lorem Ipsum</h1>
        <img src="http://via.placeholder.com/121x170" style="float: right; padding: 10px;">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer scelerisque vel tellus eget iaculis. Quisque varius magna eget quam varius, a pellentesque ante consequat. Curabitur commodo blandit massa, quis aliquet ex placerat eget. Nam tristique
          commodo quam a suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum lorem enim, luctus in luctus
          et, porttitor blandit ipsum. Duis nec fringilla eros, quis ullamcorper enim. Donec porta leo eget finibus feugiat. Ut in velit rutrum, luctus purus at, pretium sem. Aenean blandit, magna at efficitur sollicitudin, quam ipsum blandit velit, nec
          euismod nulla lacus ac diam. Integer metus metus, tincidunt ac interdum vel, vulputate sit amet ipsum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi interdum, urna sed malesuada scelerisque, dolor
          urna vulputate nisi, ut pretium tortor sapien ac diam. Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor sagittis blandit. Nullam suscipit vel mauris sit amet porttitor.
          Proin volutpat leo sed sem consectetur congue. Mauris pulvinar, tellus et blandit molestie, nulla turpis cursus lacus, id pulvinar lectus enim vitae eros. Vestibulum sed lacus dolor. Nulla gravida aliquam dolor, vel consectetur mi iaculis sed.
          Etiam odio ante, auctor sit amet tortor eu, cursus dictum arcu. Etiam vel elit ac nisl eleifend consequat id sit amet sem. Aliquam porta mi in auctor suscipit. Aliquam sodales tellus vel nibh tempus posuere. Donec urna eros, rhoncus ut dictum
          rhoncus, tempus eu nibh.</p>

        <ul>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
          <li>urna sed malesuada scelerisque</li>
        </ul>
        <p>
          Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolorl Sed sagittis ac ex sed facilisis. Integer nec convallis est, a eleifend purus. Nullam porttitor turpis sollicitudin dolor</p>

      </div>

    </div>
    <div id="footerbar" ">
				<div id="footercontent ">
					<p>Sed sagittis ac ex sed facilisis.</p>
				</div>
			</div>
		</div>
	</body>
</html>

答案 1 :(得分：0)

如果您尝试根据浏览器视口定位元素，则不能很好地使用float或flex。你正在努力实现绝对的地位。

header{background:red; position:absolute; left:0; top:0; right:0; height:100px;}
nav{background:green; position:absolute; left:0; top:100px; bottom:50px; width:150px;}
content{background:yellow; position:absolute; left:150px; top:100px; right:0; bottom:50px;}
footer{background:blue; position:absolute; left:0; right:0; bottom:0; height:50px;}
<header></header>
<nav></nav>
<content></content>
<footer></footer>

相关问题
最新问题