3个div覆盖整个窗口答案

【问题标题】：3 divs covering whole window3个div覆盖整个窗口
【发布时间】：2014-04-02 02:14:44
【问题描述】：

我对使用 CSS 定位 div 没有什么问题 - 我想制作 3 个覆盖整个窗口的 div：

div1（顶部），宽度为 100%，高度恒定
div2（左下），宽度和全高恒定
div3（右下），剩余宽度，全高

没有 JavaScript 有没有办法做到这一点？

谢谢。

【问题讨论】：

标签： html css

【解决方案1】：

这是你要找的吗？

小提琴：http://jsfiddle.net/5V48p/1/

编辑 - 刚刚看到您关于底部 div 的流体高度的评论 - 请参阅：http://jsfiddle.net/5V48p/2/

HTML：

<body>
    <div id="top">Word, yo.</div>
    <div id="bottom-left">Look at me!</div>
    <div id="bottom-right">Hobajoba!</div>
</body>

CSS：

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
}
#top {
    height: 100px;
    background-color: yellow;
}
#bottom-left {
    position:absolute;
    bottom:0px;
    float:left;
    width: 180px;
    background-color: lightblue;
    height:calc(100% - 100px);
    margin-top:100px;
}
#bottom-right {
    position:absolute;
    bottom:0px;
    width: calc(100% - 180px);
    margin-left:180px;
    background-color: pink;
    height:calc(100% - 100px);
    margin-top:100px;
}

【讨论】：

是的，css“calc”函数——这就是我需要的。谢谢！

【解决方案2】：

例如：

.div1 {
  position:absolute;
  left:0;
  right: 0;
  top:0;
  height: 100px;
}
.div2 {
  position:absolute;
  left:0;
  bottom: 0;
  height: 20px;
  width: 100px;
}
.div3 {
  position:absolute;
  right:0;
  bottom: 0;
  height: 20px;
  left: 100px;
}

EXAMPLE

【讨论】：

谢谢，但 div2 和 div3 的高度不能恒定。

【解决方案3】：

在这里，查看我的 jsfiddle：http://jsfiddle.net/Shwunky/nwy6h/

基本上，这是z-index上的一出戏

我看到的唯一问题是，如果删除右下角和上角，左下角会填满整个视口。

【讨论】：

好的，但是如果我将某些内容放在“botright” div 中，它将被其他 div 覆盖。
例如，如果您将一个段落放入右下 div 中，您可以使其具有相对定位并将其顶部偏移顶部 div 的高度并将其左侧偏移底部左 div 的宽度.

【解决方案4】：

是的，您可以使用 javascript 来实现。关键是要了解如何利用 position: absolute。

这是一个 JS Fiddle，向您展示了它是如何完成的： http://jsfiddle.net/cbbZq/

HTML：

<div id="container">
  <div id="top">Top</div>
  <div id="bottom-left">Bottom Left</div>
  <div id="bottom-right">Bottom Right</div>
</div>

CSS：

html, body {
  width: 100%;
  height: 100%;
}

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

#top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background-color: lightblue;
}

#bottom-left {
  position: absolute;
  top: 200px;
  left: 0;
  bottom: 0;
  width: 100px;
  background-color: yellow;
}

#bottom-right {
  position: absolute;
  top: 200px;
  left: 100px;
  right: 0;
  bottom: 0;
  background-color: green;
}

【讨论】：

【解决方案5】：

HTML：

<body>
    <div id="top">TOP AREA</div>
    <div id="bottom-right">
          <div id="bottom-left">
               FIXED WIDTH
          </div>
          NOT FIXED
    </div>
</body>

CSS：

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

#top
{
  width:100%;
}

#bottom-left
{
  width:180px;
  float:left;
}

#bottom-right
{
  width:100%;
}

【讨论】：

【解决方案6】：

您可以使用table,tr,td 实现此目的，如下所示：

<body>
    <table class="table" cellspacing="0">
        <tr id="top">
            <td  colspan="2"></td>
        </tr>
        <tr id="division">
            <td id="left"></td>
            <td id="right"></td>
        </tr>
    </table>
</body>

和css：

html,body {
    height:100%;
}
#top {
    width: 100%;
    height: 100px;
    background-color:red;
}
.table {
    height: 100%;
}
#division {
    width: 100%;
    min-height: 100%;
}

#left {
    background-color:green;
    min-width: 100px;
}

#right {
    background-color:blue;
    width: 100%;
}

这里是演示：http://jsfiddle.net/aneelkkhatri/2c7ag/1/

【讨论】：