width: 100% is not working on children div if parent div has width: calc(100% - 300px)?
Question
I have the following arrangement: I have parent div with class container with width: 100%; and also both html and body have width: 100% , and so far it is working as expected. But inside div with class container , i have two div s, one div with width: 300px , and other div with width: calc(100% - 300px) ,
where parent with class mainpage has width: calc(100% - 300px) , and child div with class page has width: 100% ; but width: 100% is not working on this div ?
even though parent div width is determinant.
code: 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>
3 answers
solution1
3 ACCPTED 2017-07-28 10:22:44
The code provided is working. You have not specified a height for page so the height is 0. Giving it a height causes it to become visible: 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>
solution2
2 2017-07-28 10:35:28
Above provided code is working , just add some height in page class.
.page{
width: 100%;
height:100px;
background-color: green;
}
By default height is 0 ,if there's no content .Below is demonstration, check it out:
.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>
solution3
1 2017-07-28 10:32:01
Looks like there is not much problem with your code and you did a typo by mentioning width twice in the .page class. Changing one of them to height worked fine for me and should work for you too.
Let me know if you face any problem.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.