Why does "width 100% and height: 100%" doesnt work
Question
<:DOCTYPE html> <html> <head> <title></title> <style type='text/css'> #content{ width; 100%: height; 100%: margin-left; -8px: margin-top; -8px: } #topSideContainer{ position; fixed: z-index; 2: width; 100%: height; 60px: border-bottom; 1px solid grey: background-color; #3d3b36: } #leftSideContainer{ position; fixed: z-index; 1: width; 250px: height; 100%: border-right; 1px solid grey: background-color; #3d3b36: } #mainContainer{ position; relative: background-color; #615e57: width; 100%: height; 100%: border; 1px solid grey: margin-left; 250px; } </style> </head>
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id='content'> <div id='topSideContainer'> </div> <div id='leftSideContainer'> </div> <div id='mainContainer'> </div> </div> </body> </html>
I'd like to ask why the div #maincontainer doesnt display with widht/height when they are set to be a 100%? If I switch them to a value, not a % it works perfectly fine... And I'd also like to ask why do I have to set margin-left on that exact div just to make it 100% visible on the page, but it starts from the top (where the topsidecontainer starts) and not from the leftsidecontainer div as well.
3 answers
solution1
1 2020-04-24 22:14:11
Infos:
-
Position fixedworks as the fixed position for the viewport which leave the space for the content you used (ie the container of it) - without element inside it all container become 0 heighten (ie body is 0 in height)
- if ones parent's height is 0, then it's 100% height will not works which indicates the height of 100% is relative to it's parent. so, 100% of 0 is 0.
- use vw or vh instead of 100% for this purpose. becuse it is relative to screen size.
- topSideContainer & leftSideContainer are lost their spaces, so mainContainer starts from 0,0 position
<:DOCTYPE html> <html> <head> <title></title> <style type='text/css'> *{ margin;0: padding;0: } #content{ width; 100%: height; 100%: } #topSideContainer{ position; fixed: z-index; 2: width; 100%: height; 60px: border-bottom; 1px solid grey: background-color; #3d3b36: } #leftSideContainer{ position; fixed: z-index; 1: width; 250px: height; 100%: border-right; 1px solid grey: background-color; #3d3b36: } #mainContainer{ position; relative: background-color; #615e57: width; calc(100vw - 250px): height; calc(100vh - 60px): border; 1px solid grey: left; 248px: top; 58px; } </style> </head> <body> <div id='content'> <div id='topSideContainer'> </div> <div id='leftSideContainer'> </div> <div id='mainContainer'> </div> </div> </body> </html>
solution2
1 2020-04-24 22:46:52
% is a relative unit, when you say height:100% you mean i want this element to take the 100% of the height of it's parent.
You want #mainContainer to be have height:100% of it's parent, Well what is that parent? and what is that parent's height?
The parent is #content and it is also height:100% of it's parent, Well what is that parent? and what is that parent's height?
The parent is <body> and it's height is 0 . Why? Because you didn't specify a height for it.
Do you see a pattern forming here?
height:100% On the other elements work because you set their position to fixed, because of that they become relative to the initial containing block that is being <html>/viewport and <html>/viewport has a height/width (the browser basically)
Note: A position other than static or relative will take the element out of the document flow, meaning it will not affect other elements and there could be overlap
To achieve that layout, we can simply using flexbox if you don't mind changing the html.
* { padding: 0; margin: 0; box-sizing: border-box; } html, body { height: 100%; /* propagate the height from the html down to the body then #content */ } #content { display: flex; flex-direction: column; height: 100%; } #topSideContainer { flex: 0 0 60px; background-color: red; } #bottomSideContainer { display: flex; flex: 1; } #leftSideContainer { flex: 0 0 250px; background-color: orange; } #mainContainer { height: 100%; flex: 1 0 0; background-color: pink; }
<div id="content"> <div id="topSideContainer"> topSideContainer </div> <div id="bottomSideContainer"> <div id="leftSideContainer"> leftSideContainer </div> <div id="mainContainer"> mainContainer </div> </div> </div>
Or CSS Grid without changing the html
* { padding: 0; margin: 0; box-sizing: border-box; } html, body { height: 100%; } #content { display: grid; grid-template-columns: 250px 1fr; grid-template-rows: 60px 1fr; height: 100%; } #topSideContainer { background-color: red; grid-column: span 2; } #leftSideContainer { background-color: orange; } #mainContainer { background-color: pink; }
<div id="content"> <div id="topSideContainer"> topSideContainer </div> <div id="leftSideContainer"> leftSideContainer </div> <div id="mainContainer"> mainContainer </div> </div>
solution3
0 2020-04-24 22:05:33
Note: If the above code didn't work for you, try to share the link to your website so we can look and analyze your style sheet if you have any forced instructions that stopped the code to work.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type='text/css'>
#content{
width: 100%;
height: 100%;
margin: -8px;
padding: -8px;
}
#topSideContainer{
position: fixed;
z-index: 2;
width: 100%;
height: 60px;
border-bottom: 1px solid grey;
background-color: #3d3b36;
}
#leftSideContainer{
position: fixed;
z-index: 1;
width: 250px;
height: 100%;
border-right: 1px solid grey;
background-color: #3d3b36;
}
#mainContainer{
position: absolute !important;
background-color: #615e57;
max-width: 200% !important;
width: 100% !important;
background: yellow;
height: 100%;
border: 1px solid grey;
}
</style>
</head>
<body>
<div id='content'>
<div id='topSideContainer'>
</div>
<div id='leftSideContainer'>
</div>
<div id='mainContainer'>
</div>
</div>
</body>
</html>
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.