调整浏览器大小时，Div 不让 100% 的宽度
[英]Div not letting 100% of width when resizing browser
问题描述
我记得它曾经在我将宽度设置为 100% 时工作，一旦从桌面到平板电脑再到移动设备的某些像素调整大小。 只是不知道为什么我的这次因为某种原因不能工作。 尝试在调整像素大小时使 header、内容和页脚为其宽度的 100%。
仅供参考，还没有到页脚。
*. { 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
我看到这里发生了什么！
您的标题有200px的内边距，内容有80px 。 当窗口的宽度大于600px 时，内容和标题的宽度是auto ，所以它是它们的容器（ <body> ）的宽度减去200px/80px padding，并且因为 padding 在宽度的外侧，它们很好地填满了窗口的宽度！
然后当窗口大小低于 600px 时，header 和 content 的宽度设置为容器的 100%，但是 200px/80px 的 padding 在这 100% 的外面，所以元素占用了更多的空间！ 如果您将box-sizing设置为border-box ，那么填充会放在里面，当窗口宽度发生变化时，您看不到任何变化。
我认为你想要做的是减少填充而不是使宽度 100%，使内容更宽！ 此外，您可能想要对<body>上的 8px 边距做一些事情，因为这就是整个页面周围存在间隙的原因。
我希望我做对了:)
解决方案2
0 2019-12-16 04:17:53
当屏幕低于 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
对于来到这里的任何人，我有两个问题导致浏览器呈现页面 html 没有 100% 调整浏览器视口的大小。
首先，我使用了在 html 中设置了样式宽度的 img 标签； <img id="recipe_picture" class="method-img" src="{{ step.picture1() }}"/>
调整大小后的第二个问题是预设的，因为我试图通过将主容器填充设置为 0 来解决问题（实际上让事情变得更糟）
.container{
padding: 0;
}
删除这些部分后问题得到解决，希望这对某人有所帮助
调整浏览器窗口大小时，如何使固定宽度的div推入另一个具有相对宽度的div？
[英]How to make a div with a fixed width push another div with a relative width when resizing the browser window?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.