为什么“宽度 100% 和高度：100%”不起作用
[英]Why does "width 100% and height: 100%" doesnt work
问题描述
<: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%?
我想问一下为什么 div #maincontainer 设置为 100% 时不显示 widht/height？ 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.如果我将它们切换为一个值，而不是 %，它会工作得很好......而且我还想问为什么我必须在那个确切的 div 上设置 margin-left 只是为了让它在页面上 100% 可见，但它从顶部（topsidecontainer 开始的地方）开始，而不是从 leftsidecontainer div 开始。
3 个解决方案
解决方案1
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)Position fixed作为视口的固定 position 工作，为您使用的内容（即它的容器）留出空间 - without element inside it all container become 0 heighten (ie body is 0 in height)如果里面没有元素，所有容器都会变成 0 高度（即主体高度为 0）
- 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.如果父项的高度为 0，则其 100% 高度将不起作用，这表明 100% 的高度是相对于其父项的。 so, 100% of 0 is 0.所以，0 的 100% 是 0。
- use vw or vh instead of 100% for this purpose.为此，使用 vw 或 vh 而不是 100%。 becuse it is relative to screen size.因为它与屏幕尺寸有关。
- topSideContainer & leftSideContainer are lost their spaces, so mainContainer starts from 0,0 position topSideContainer 和 leftSideContainer 失去了它们的空间，所以 mainContainer 从 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>
解决方案2
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. %是一个相对单位，当你说height:100%时，你的意思是我希望这个元素占据它父元素高度的 100%。
You want #mainContainer to be have height:100% of it's parent, Well what is that parent?您希望#mainContainer的height:100% ，那父级是什么？ 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?父级是#content ，它也是父级的height:100% ，那么那个父级是什么？ and what is that parent's height?那个父母的身高是多少？
The parent is <body> and it's height is 0 .父级是<body>并且它的高度是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) height:100%在其他元素上工作是因为您将它们的 position 设置为固定的，因为它们相对于<html>/viewport和<html>/viewport的初始包含块具有高度/宽度（浏览器基本上）
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注意：A position 不是 static 或 relative 会将元素从文档流中取出，这意味着它不会影响其他元素并且可能会重叠
To achieve that layout, we can simply using flexbox if you don't mind changing the html.要实现该布局，如果您不介意更改 html，我们可以简单地使用flexbox 。
* { 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或 CSS 网格不变 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>
解决方案3
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.