Question

我用CSS定位div有点问题 - 我想制作覆盖整个窗口的3个div：

div1（顶部）宽度为100％且高度恒定
div2（左下），宽度恒定，全高
div3（右下）剩余宽度，也是全高

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

感谢。

Answer 1

例如：

.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

Answer 2

在这里，结帐我的jsfiddle：http://jsfiddle.net/Shwunky/nwy6h/

基本上，它是z-index

上的游戏

我看到这个问题的唯一问题是，如果你删除了右下角和右下角分区，左下角分区将填满整个视口。

Answer 3

是的，你可以用javascript做到这一点。关键是要了解如何利用职位：绝对。

这是一个JS小提琴，告诉你如何做到这一点： 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;
}

Answer 4

这是你在找什么？

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

Answer 5

您可以使用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/

Answer 6

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

覆盖整个窗口的3个div

6 个答案: