3的div覆盖整个窗口

我有与CSS定位的div小的问题 - 我想使3周的div覆盖整个窗口：3的div覆盖整个窗口

DIV1（顶部）与宽度为100％和恒定高度
DIV2 （左下）等宽和全高
DIV3（右下）与剩余的宽度，也充满了高度

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

谢谢。

来源

2014-04-01 Rodgard

这是你在找什么？

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

来源

2014-04-01 17:35:09 Octavian

是的，css“calc”函数 - 这正是我所需要的。谢谢！ – Rodgard

例如：

.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

来源

2014-04-01 16:49:37 Nick

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

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

基本上，它是在z-index

一出戏我这个人是看到的唯一问题如果你删除右下角和顶部的分区，左下角的分区将填满整个vi ewport。

来源

2014-04-01 17:01:49 Shwunky

好的，但是如果我将某些东西放在“botright”div中，它会被其他div所覆盖。 – Rodgard

例如，如果您将一个段落放入botright div，您可以使其具有相对位置，并将其顶部偏移顶部div的高度，并将其左侧偏移左侧div的宽度。 – Shwunky

是的你可以用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; 
}

来源

2014-04-01 17:33:24 richardaday

可以按如下方式实现这一目标用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/

来源

2014-04-01 17:35:17 aneelkkhatri

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

来源

2014-04-01 17:42:07 Joshua

3的div覆盖整个窗口

回答

相关问题