3

我有一个位于身体顶部的 div 和位于身体底部的另一个 div

现在我想在这两个 div 之间放置一个 div，并让它的高度占据这两个 div 之间可用的最大空间。

这两个 div 之间的垂直空间不固定，这意味着当用户减小/增加窗口的高度时，我希望中间 div 相应地重新调整其高度。

进一步来说 ：

<body>
  <div style="position: fixed; top: 0px; left: 0px; width: 200px; height: 100%;">
    <div style="float: left; height: 50px, width: 200px; background-color: green;"/>
    <div style="float: left; height: ???? ; width: 200px; background-color: red;"/> 
    <div style="float: left; height: 50px, width: 200px; background-color: blue;" />
  </div>
</body>

所以基本上想象一个绿色的矩形固定在页面的左上角，一个蓝色的矩形固定在页面的左下角，它们之间的一个红色柱子根据窗口的高度重新调整它的高度。

我怎样才能做到这一点？

将其高度设置为 100% 只会使中间 div 将其高度扩展到窗口底部，这不是我想要的。我需要它停止蓝色 div 开始的地方。此外，将其高度设置为 73% 也不会使其在窗口高度发生变化时自动正确调整自身。

4

4 回答 4

2

假设您这样做是因为您想要一个刷新到页面底部的页脚，那么这将达到类似的效果： http: //matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-这页纸

然而，解决方案不会调整中间 div 的大小，而只是将页脚放在它上面，然后使用填充来防止中间 div 的内容进入页脚。

如果你想真正改变中间 div 的大小，这里是使用 jQuery 的 JavaScript：http: //jsfiddle.net/BnJxE/

JavaScript

var minHeight = 30; // Define a minimum height for the middle div

var resizeMiddle = function() {
    var h = $('body').height() - $('#header').height() - $('#footer').height();
    h = h > minHeight ? h : minHeight;
    $('#body').height(h);
}

$(document).ready(resizeMiddle);
$(window).resize(resizeMiddle);

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

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

#header {
   background:#ff0;
   height: 100px;
}
#body {
   background: #aaa;
}
#footer {
   height: 60px;
   background:#6cf;
}
于 2013-07-16T00:34:04.557 回答
0

结束<div>标签的正确方法是使用</div>.

试试这个代码 -

<body>
  <div style="position: fixed; top: 0px; left: 0px; width: 200px; height: 100%;">
    <div style="float: left; height: 50px; width: 200px; background-color: green; position: fixed;"></div>
    <div style="float: left; height: 100%; width: 200px; background-color: red;"></div> 
    <div style="float: left; bottom: 0px; left:0px; position: fixed; height: 50px; width: 200px; background-color: blue;"></div>
  </div>
</body>
于 2013-07-15T23:28:17.750 回答
0

HTML：

<body>
    <div id="wrapper">
        <div id="div1">...</div>
        <div id="div2">...</div>
        <div id="div3">
            content<br/>
            content<br/>
        </div>
    </div>
</body>

CSS：

html, body {
    height:100%;
}
#wrapper {
    position:relative;
    height:100%;
}
#div3 {
    background:pink;
    bottom:0;
    position:absolute;
    width:100%;
}

jsfiddle：http: //jsfiddle.net/BnJxE/

于 2013-07-15T23:44:46.527 回答
0

您可以使用与顶部和底部元素高度相同的填充，并将 box-sizing 设置为border-box。通过将高度设置为 100%，它将覆盖整个高度减去填充。

带有可滚动内容的JSFiddle

#container {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 200px;
  height: 100%;
}
#top {
  float: left;
  height: 50px;
  width: 200px;
  background-color: green;
  position: fixed;
  top: 0;
}
#middle {
  float: left;
  height: 100%;
  width: 200px;
  background-color: red;
  box-sizing: border-box;
  padding-bottom: 50px;
  padding-top: 50px;
}
#bottom {
  float: left;
  height: 50px;
  width: 200px;
  background-color: blue;
  position: fixed;
  bottom: 0;
}
<body>
  <div id="container">
    <div id="top"></div>
    <div id="middle"></div> 
    <div id="bottom"></div>
  </div>
</body>

于 2018-05-21T23:48:44.347 回答