Html 如何使用将Content Div扩展到浏览器
下面是我的代码Html 如何使用将Content Div扩展到浏览器,html,css,styles,stylesheet,Html,Css,Styles,Stylesheet,下面是我的代码 <div class="wrapper"> <div class="left"> </div> <div class="right"> </div> </div> 我已经将我的包装的宽度设置为100%,现在我的左边宽度为40px 1) 我想将我的右div宽度从40px扩展到几乎等于98.6%的浏览器窗口 2) 我想将我的左div高度扩展为右div高度 如何解决这个问题?你的问题很难理解
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
</div>
我已经将我的包装的宽度设置为100%,现在我的左边宽度为40px
1) 我想将我的右div
宽度从40px
扩展到几乎等于98.6%的浏览器窗口
2) 我想将我的左div
高度扩展为右div
高度
如何解决这个问题?你的问题很难理解
但我认为有几种方法可以回答你的问题
.right{
width:calc(100% - 40px);
}
或者你可以这样做
.right{
height:100px;
margin:0 20px;;
background:#EEE;
}
除非使用Javascript
请尝试css3 flexbox模块,如下所示:
HTML
请查看。关于CSS3 flexbox模块,请单击
<div class="wrapper">
<div class="left">
left
</div>
<div class="right">
right
</div>
</div>
html,body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
height: 100%;
width: 100%;
display:-moz-box;
display:-webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.left {
width: 40px;
background: green;
}
.right {
-moz-flex-box: 1;
-webkit-flex-box: 1;
-ms-flex: 1;
-webkit-flex: 1;
flex: 1;
background: orange;
}