gpt4 book ai didi

css - 绝对 Div 填充窗口的剩余部分

转载 作者:行者123 更新时间:2023-11-28 13:33:51 30 4
gpt4 key购买 nike

我有 3 个 div,都是 positioned: absolute,但是我想要填充窗口宽度的 div 只会适应其中文本的长度。我希望黄色 div #help 填充窗口的其余部分。

我知道这听起来很菜鸟,但我无法在任何地方找到解决方案。

<div id="tab1">tab1</div>
<div id="tab2">tab2</div>
<div id="help">help</div>

#tab1 {position: absolute;
bottom; 0px;
right: 0px;
width: 50px;
height: 20px;
background-color: green;
}


#tab2 {position: absolute;
bottom; 0px;
right: 50px;
width: 50px;
height: 20px;
background-color: yellow;
}

#help {position: absolute;
bottom; 0px;
right: 100px;
height: 20px;
background-color: red;
}

JS fiddle :http://jsfiddle.net/FBWzX/

最佳答案

如果想让#help拉伸(stretch),可以同时设置leftright值。这个技巧也适用于 topbottom。绝对定位元素非常灵活。

#help {
position: absolute;
left: 0;
right: 100px;
}

jsFiddle Demo

关于css - 绝对 Div 填充窗口的剩余部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10562093/

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