我有以下安排: 我有家长div
,有width: 100%;
类container
,而且html
和body
都有width: 100%
,到目前为止,它正在按预期工作。 但是在div
container
类的里面,我有两个div
,一个是div
width: 300px
, 和其他带有width: calc(100% - 300px)
的div
,其中具有类mainpage
的父级具有width: calc(100% - 300px)
,具有类page
的子div
具有width: 100%
; 但是width: 100%
没有在这个div
工作?
即使父div
width
是决定性的。
代码:https://jsfiddle.net/tj8k0nnw/1/
.container {
width: 100%;
background-color: #d5d5d5;
}
.sidebarcontainer {
width: 300PX;
height: 2000px;
display: inline-block;
box-sizing: border-box;
padding: 5px;
padding-right: 2px;
}
.innersidebarcontainer {
position: relative;
width: 100%;
height: 100%;
}
.sidebar {
width: 293px;
background-color: white;
height: 700px;
top: 1px;
position: absolute;
}
.mainpage {
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 3000px;
display: inline-block;
box-sizing: border-box;
background-color: teal;
}
.page {
width: 100%;
width: 100%;
background-color: white;
}
.footer {
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}
.test1 {
background-color: red;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 200px;
}
.test2 {
background-color: red;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 200px;
}
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
<div class="test1"></div>
<div class="test2"></div>
</div>
</div>
</div>
<!--
-->
<div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
提供的代码正在工作。您尚未指定page
的高度,因此高度为 0。给它一个高度会使它变得可见:https://jsfiddle.net/kvjw9vhm/
.container{
width: 100%;
background-color: #d5d5d5;
}
.sidebarcontainer{
width: 300PX;
height: 2000px;
display: inline-block;
box-sizing: border-box;
padding: 5px;
padding-right: 2px;
}
.innersidebarcontainer{
position: relative;
width: 100%;
height: 100%;
}
.sidebar{
width: 293px;
background-color: white;
height: 700px;
top: 1px;
position: absolute;
}
.mainpage{
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 3000px;
display: inline-block;
box-sizing: border-box;
background-color: teal;
}
.page{
width: 100%;
height: 100%; /* was width: 100%; */
background-color: white;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}
.test1{
background-color: red;
position: absolute;
left: 0;
right: 0;
top: 0;
height: 200px;
}
.test2{
background-color: red;
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 200px;
}
<body>
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
<div class="test1"></div>
<div class="test2"></div>
</div>
</div>
</div>
<div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
</body>
上面提供的代码可以工作,只需在页面类中添加一些高度即可。
.page{
width: 100%;
height:100px;
background-color: green;
}
默认高度为 0 ,如果没有内容。下面是演示,看看吧:
.mainpage{
width: calc(100% - 300px);
padding: 5px;
padding-right: 2px;
height: 3000px;
display: inline-block;
box-sizing: border-box;
background-color: teal;
}
.page{
width: 100%;
height:100px;
background-color: green;
}
.footer{
height: 500px;
width: 100%;
margin: 0 auto;
background-color: purple
}
<body>
<div class="container">
<div class="sidebarcontainer">
<div class="innersidebarcontainer">
<div class="sidebar">
<div class="test1"></div>
<div class="test2"></div>
</div>
</div>
</div><!--
--><div class="mainpage">
<div class="page"></div>
</div>
</div>
<div class="footer"></div>
</body>
看起来你的代码没有太大问题,你在.page
类中两次提到width
,做了一个错字。 将其中一个更改为height
对我来说效果很好,也应该对您有用。
如果您遇到任何问题,请告诉我。