html页面中多个div其中的一个div自适应浏览器高度

「已注销」 2018-03-01 12:24:44

.zuo_four { width:216px; height:32%; position:absolute; top:505px;}

<div class="zuo_four">
<div id="jhcd" style="height:90%; width:181px; background:url(../page/img/l10.png) repeat-y; margin-left:17px;border: 1px solid #c9c0ae;overflow: scroll;overflow-x:hidden;scrollbar-track-color:#aea59d;scrollbar-face-color:#766a6b;scrollbar-arrow-color:#aea59d;scrollbar-highlight-color:#aea59d;scrollbar-3dlight-color:#aea59d;scrollbar-darkshadow-color:#aea59d;"></div>
</div>
怎样让这个div自适应各个浏览器中剩余的高度呢

...全文

1547 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

z_771259 2018-03-08

打赏
举报

直接使用flex布局

100001夜 2018-03-05

打赏
举报

用js/jq，页面加载后自动取屏幕高，减去其余三个div块的高度，赋给第三个div高度


$("#div3").height($(document).height()-$("#div1").height()-$("#div2").height()-$("#div4").height());

自渡96 2018-03-02

打赏
举报

学习下。。。。。

「已注销」 2018-03-02

打赏
举报

引用 4 楼 Hello_See_You 的回复:

用百分比，js，jQuery试试

还请多多指教下！

Hello_See_You 2018-03-02

打赏
举报

用百分比，js，jQuery试试

「已注销」 2018-03-01

打赏
举报

引用 1 楼 usecf 的回复:

你按照100%设置

大佬

「已注销」 2018-03-01

打赏
举报

<html> <head> <style type="text/css"> #div1 { height:200px; width:100px; background:#ff0000; } #div2 { width:500px; height:30px; background:#00ff00; } #div3 { height:60%; width:300px; background:#0000ff; } #div4 { height:150px; width:300px; background:#aa00ff; } </style> </head> <body> <div style="color:#00FF00" id="div1">This is a div1</div> <div style="color:#000000" id="div2">This is a div2</div> <div style="color:#FFFF00" id="div3">This is a div3</div> <div style="color:#000000" id="div4">This is a div4</div> </body> </html> 您给的代码我改成这样了固定了三个DIV的高和宽，只给第三个div设置高度百分比，这种情况，第三个div有没有办法自适应其他三个div剩余的高度呢！

usecf 2018-03-01

打赏
举报

你按照100%设置 <html> <head> <style type="text/css"> #div1 { height:20%; width:100px; background:#ff0000; } #div2 { width:500px; height:30%; background:#00ff00; } #div3 { height:30%; width:300px; background:#0000ff; } #div4 { height:20%; width:300px; background:#aa00ff; } </style> </head> <body> <div style="color:#00FF00" id="div1">This is a div1</div> <div style="color:#000000" id="div2">This is a div2</div> <div style="color:#FFFF00" id="div3">This is a div3</div> <div style="color:#000000" id="div4">This is a div4</div> </body> </html>