gpt4 book ai didi

html - 3个div覆盖整个窗口

转载 作者:行者123 更新时间:2023-11-28 10:50:58 29 4
gpt4 key购买 nike

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

  • div1(顶部),宽度为 100%,高度不变
  • div2(左下),宽度和全高保持不变
  • div3(右下),剩余宽度,也是全高

没有 JavaScript 有什么办法可以做到这一点吗?

谢谢。

最佳答案

这是您要找的吗?

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

关于html - 3个div覆盖整个窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22791934/

29 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com