左边的DIV设定了固定的宽度，右边的DIV如何自适应地填满剩下的屏幕宽度？
左边的DIV设定了固定的宽度，右边的DIV如何自适应地填满剩下的屏幕宽度？自适应是为了满足不同电脑的分辨率。我已经设定了DIV等高了。<styletype="text/c...
左边的DIV设定了固定的宽度，右边的DIV如何自适应地填满剩下的屏幕宽度？自适应是为了满足不同电脑的分辨率。我已经设定了DIV等高了。
<style type="text/css">
/*CSS部分*/
*{margin:0;padding:0;font-family:"微软雅黑";} /*去除默认间隔，设定全部字体为微软雅黑*/
body{background-image: url(images/wooden.jpg); background-repeat:no-repeat; background-size:cover; -moz-background-size: cover;} /*网页背景*/
#sidebar{width: 210px; height:auto; background-color: #ebb058;float:left; position: fixed; }
#container{width: auto;height: auto;border: 2px solid #400080;margin-left: 210px; float: left; position: absolute;}
</style>
<!--HTML部分-->
<body>
<!--div盒子模型 -->
<div id="sidebar"><!--左边的DIV-->
</div>
<div id="container"><!--右边的DIV-->
</div>
<!--javascript部分-->
<!--div等高-->
document.getElementById("sidebar").style.height = document.getElementById("container").offsetHeight + "px";
</script>
</body> 展开
<style type="text/css">
/*CSS部分*/
*{margin:0;padding:0;font-family:"微软雅黑";} /*去除默认间隔，设定全部字体为微软雅黑*/
body{background-image: url(images/wooden.jpg); background-repeat:no-repeat; background-size:cover; -moz-background-size: cover;} /*网页背景*/
#sidebar{width: 210px; height:auto; background-color: #ebb058;float:left; position: fixed; }
#container{width: auto;height: auto;border: 2px solid #400080;margin-left: 210px; float: left; position: absolute;}
</style>
<!--HTML部分-->
<body>
<!--div盒子模型 -->
<div id="sidebar"><!--左边的DIV-->
</div>
<div id="container"><!--右边的DIV-->
</div>
<!--javascript部分-->
<!--div等高-->
document.getElementById("sidebar").style.height = document.getElementById("container").offsetHeight + "px";
</script>
</body> 展开
4个回答
展开全部
<head>
<style>
.row{
display: flex;
wrap: no-wrap;
}
.box1{
width: 100px;
height: 100px;
}
.box2{
width: 100%;
height: 200px;
background: black;
color: #fff;
}
</style>
</head>
<body>
<div class="row">
<div class="box1">
<h1>box1</h1>
</div>
<div class="box2">
<h1>box2</h1>
</div>
</div>
</body>
可以简单参考一下，上面用了flex布局。（我也是最近才学的）
至于用浮动来实现，一时半会我还真想不起要怎么实现了，再想想看......
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
无需js、无需浮动，直接用CSS即可搞定这样的布局，主要代码如下：
#sidebar, #container {min-height:400px; /* 视具体情况 */}
#sidebar {width:210px; background-color:#ebb058; position:absolute; top:0; left:0;}
#container {margin-left:210px; border:2px solid #400080;}居然没悬赏分的说……
追问
用你的绝对定位没办法固定sidebar不跟随页面滚动。暂时发现只有position:fixed才能固定。
追答
你想固定sidebar的话，将position:absolute改为position:fixed即可。
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;}
body{
width: 100%;
height: 100%;
}
.l{
float: left;
width: 131px;
height: 45px;
background-color: #aaa;
}
.r{
height: 45px;
background-color: #0f0;
}
</style>
</head>
<body>
<div>左</div>
<div>右</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
右边盒子设置宽度百分之百，margin-left是左边盒子的宽度就可以了
或者伸缩布局，设置flex
或者伸缩布局，设置flex
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
