javascript - width: 100% is not working on children div if parent div has width: calc(100% - 300px)? -
i have following arrangement: have parent div
class container
width: 100%;
, both html
, body
have width: 100%
, , far working expected. inside div
class container
, have 2 div
s, 1 div
width: 300px
, , other div width: calc(100% - 300px)
,
where parent class mainpage
has width: calc(100% - 300px)
, , child div
class page
has width: 100%
; width: 100%
not working on div
?
even though parent div
width
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>
the code provided working. have not specified height page
height 0. giving height causes 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%; /* 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>
Comments
Post a Comment