调整浏览器大小时Div不允许宽度的100％ [英] Div not letting 100% of width when resizing browser
问题描述
我记得当将宽度设置为100％(从台式机到平板电脑再到移动设备)的某些像素大小时，它曾经可以正常工作.只是不知道为什么我的这次由于某种原因而无法正常工作.调整像素大小时，尝试使页眉，内容和页脚为其宽度的100％.
I remember it used to work when I set the width to 100% once resized at certain pixels from desktop to tablets to mobile. Just don't know why mine won't work this time around for some reason. Trying to get header, content, and footer to be 100% of its width when resizing its pixels.
仅供参考，还没有到页脚.
FYI, haven't got to the footer yet.
*. {
width: 100%;
}
body {
font-family: Andale Mono, monospace;
}
p {
font-size: 24px;
}
.header {
padding: 200px;
text-align: center;
background-color: #001f4d;
}
.header h1 {
font-size: 64px;
color: white;
}
.header p {
color: white;
}
/* Begin main-content */
.content {
background: #0d0d0d;
padding: 80px;
color: white;
}
#main-title {
text-align: center;
font-size: 36px;
}
#main-paragraph {
margin: 400px;
max-width: 1000px;
margin: auto;
}
.column {
float: left;
width: 33.33%;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media screen and (max-width: 600px) {
.header {
width: 100%;
}
.content {
width: 100%;
}
#main-paragraph {
width: 100%;
}
.column {
width: 100%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Doug Cannon's Biography</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">
<h1>My Website</h1>
<p>Welcome to my website.</p>
</div>
<div class="content">
<h2 id="main-title">About Me</h2>
<p id="main-paragraph">Mollit officia quis officia nostrud culpa ad sunt quis nulla quis esse adipisicing ut. Ullamco mollit ad elit reprehenderit mollit in duis incididunt id sit laboris adipisicing nisi pariatur. Lorem ipsum ea ut qui in ea consectetur id adipisicing quis officia occaecat laboris id velit. Sunt ea irure ex nostrud elit enim dolor in ut anim cillum ad duis.</p>
<br><br><br>
<!-- Responsive column cards -->
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
</div>
</div> <!-- End main-content -->
<div class="footer">
<footer>
Douglas Cannon <span class="highlight">© 2019</span>
</footer>
</div>
</body>
</html>
推荐答案
我知道这里发生了什么！
I see what is happening here!
您的标头具有 200px 的填充，内容具有 80px .当窗口的宽度为高于 600px时，内容和标题的宽度为auto，因此它是其容器(<body>)的宽度减去 200px/80px填充，并且由于填充位于宽度的外部，因此它们很好地填充了窗口的宽度！
Your header has 200px of padding and the content has 80px. When the width of the window is above 600px, the width of the content and header is auto, so it's the width of their container (<body>) minus the 200px/80px padding, and because the padding is on the outside of the width, they fill up the width of the window nicely!
然后，当窗口大小低于600px时，标题和内容的宽度设置为容器的100％，但是200px/80px的填充位于此100％的外部因此元素占用了更多空间！如果将box-sizing设置为border-box，则填充物会放在里面，并且当窗口宽度更改时，您不会看到任何更改.
Then when the window size goes below 600px, the width of the header and content is set to 100% of the container, but the 200px/80px of padding is on the outside of this 100% so the element takes up much more space! If you set the box-sizing to border-box, then the padding gets put on the inside and you don't see any change when the window width changes.
我认为您想要做的是减少填充，而不是将宽度设置为100％，以使内容更宽！另外，您可能想对<body>上的8px边距做一些事情，因为这就是为什么整个页面上都留有空白的原因.
I think what you want to do is reduce the padding instead of making the width 100%, to make the content wider! Also you might want to do something about the 8px of margin on <body>, because that's why there is a gap around the whole page.
我希望我做对了:)
这篇关于调整浏览器大小时Div不允许宽度的100％的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
