调整浏览器大小时，Div 不让 100% 的宽度
[英]Div not letting 100% of width when resizing browser
问题描述
I remember it used to work when I set the width to 100% once resized at certain pixels from desktop to tablets to mobile.
我记得它曾经在我将宽度设置为 100% 时工作，一旦从桌面到平板电脑再到移动设备的某些像素调整大小。 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.尝试在调整像素大小时使 header、内容和页脚为其宽度的 100%。
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>
3 个解决方案
解决方案1
3 2019-12-16 00:39:16
I see what is happening here!我看到这里发生了什么！
Your header has 200px of padding and the content has 80px .您的标题有200px的内边距，内容有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 时，内容和标题的宽度是auto ，所以它是它们的容器（ <body> ）的宽度减去200px/80px padding，并且因为 padding 在宽度的外侧，它们很好地填满了窗口的宽度！
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!然后当窗口大小低于 600px 时，header 和 content 的宽度设置为容器的 100%，但是 200px/80px 的 padding 在这 100% 的外面，所以元素占用了更多的空间！ 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.如果您将box-sizing设置为border-box ，那么填充会放在里面，当窗口宽度发生变化时，您看不到任何变化。
I think what you want to do is reduce the padding instead of making the width 100%, to make the content wider!我认为你想要做的是减少填充而不是使宽度 100%，使内容更宽！ 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.此外，您可能想要对<body>上的 8px 边距做一些事情，因为这就是整个页面周围存在间隙的原因。
I hope I got it right :)我希望我做对了:)
解决方案2
0 2019-12-16 04:17:53
To make the space around the content decrease when the screen goes below 600px当屏幕低于 600px 时，使内容周围的空间减少
*. { width: 100%; } body { font-family: Andale Mono, monospace; margin: 0; } p { font-size: 24px; } .header { padding: 80px; text-align: center; background: #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 { max-width: 1000px; margin: auto; } .column { float: left; width: 33.33%; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* Footer */ .footer { background: #001f4d; padding: 80px; color: white; } /* Small devices (portrait tablets and large phones, 600px and up) */ @media screen and (max-width: 600px) { .header { padding: 40px; } .content { padding: 40px; } .footer { padding: 40px; } }
<!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>
解决方案3
0 2022-09-10 16:28:27
For anyone who comes here, I had two issues that were causing the browser to render the page with the page html not sizing 100% of the browser viewport.对于来到这里的任何人，我有两个问题导致浏览器呈现页面 html 没有 100% 调整浏览器视口的大小。
First I was using img tags with the style width set in the html as such;首先，我使用了在 html 中设置了样式宽度的 img 标签； <img id="recipe_picture" class="method-img" src="{{ step.picture1() }}"/>
Second after resizing the issue was preset due to my hacky attempts at fixing the issue by setting the main container padding to 0 (actually making things worse)调整大小后的第二个问题是预设的，因为我试图通过将主容器填充设置为 0 来解决问题（实际上让事情变得更糟）
.container{
padding: 0;
}
after removing these parts the issue was resolved, hope this helps someone删除这些部分后问题得到解决，希望这对某人有所帮助
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.