2 wlmnzf wlmnzf 于 2016.01.25 19:10 提问

html 两块div,左侧div固定宽度,右侧div宽度如何填满右侧剩余部分

html 两块div,左侧div固定宽度200px,右侧div宽度如何写才能填满浏览器右侧部分(除了calc的方法外)

8个回答

rui888
rui888   Ds   Rxr 2016.01.26 09:33
yishuixs
yishuixs thirtydot的回复很犀利,但我始终搞不明白,加了overflow:hidden;为何就能控制住长度了?
接近 2 年之前 回复
showbo
showbo   Ds   Rxr 2016.01.26 09:42

容器relative定位,200px那个absolute定位,右边的margin-left:200px


<!DOCTYPE html>
<div style="position:relative">
    <div style="position:absolute;left:0;top:0;width:200px;background:#eee;height:300px">left</div>
    <div style="margin-left:205px;background:#ccc;height:500px">right</div>
</div>
qq_24885263
qq_24885263   2016.01.25 19:15

第一种方法☞设置宽度为100%,,,
第二种方法☞得到你浏览器的宽度,然后减去你第一个div的固定宽度,剩下的值就是第二个div的宽度

wlmnzf
wlmnzf 因为是float,宽度设为100%后,就是父级的宽度,然后就被挤下去了
接近 2 年之前 回复
wlmnzf
wlmnzf 因为是float,宽度设为100%后,就是父级的宽度,然后就被挤下去了
接近 2 年之前 回复
wlmnzf
wlmnzf 因为是float,宽度设为100%后,就是父级的宽度,然后就被挤下去了
接近 2 年之前 回复
chen529834149
chen529834149   2016.01.25 20:56

第一个div如果设置边框减去边框的宽度,在浮动就ok了。


Mr_dsw
Mr_dsw   Ds   Rxr 2016.01.25 21:18

只能通过百分比进行填充设置了

q4444tita
q4444tita   2016.01.25 22:14

可以把这两个div放在同一个div中……然后设置这个div的宽度……最后用它的宽度减二百就可以了……至于这个div的宽度可以略小于屏幕宽度……相当于留白了……

bogexueqianduan
bogexueqianduan 我想题主的意思可能是说,在浏览器宽度不确定的情况下,让右侧div自动伸缩宽度并填满右侧空间
接近 2 年之前 回复
bogexueqianduan
bogexueqianduan 我想题主的意思可能是说,在浏览器宽度不确定的情况下,让右侧div自动伸缩宽度并填满右侧空间
接近 2 年之前 回复
Mr_li13
Mr_li13   2016.01.27 02:52

第二个div相对定位,然后width:100%填充

qq_31488363
qq_31488363   2016.01.28 15:55

解决方法:
//如下布局div,注意left和right的上下位置

//css
.left{
min-height:50px;
border:1px solid #f69;
overflow:hidden;
}
.right{
min-height:50px;
border:1px solid #09f;
float:right;
width:250px;
}

Csdn user default icon
上传中...
上传图片
插入图片