为什么在调整浏览器高度时外部容器 div 会缩小到其子元素之外？
[英]Why is the outer container div shrinking beyond its child element when resizing browser height?
问题描述
So i have the following html page:
所以我有以下 html 页面：
and I'm working on a "holy grail layout" using the grid structure in css for my website, consisting of a header, and three divs side by side occupying the viewport (full height) of the browser.我正在为我的网站使用 css 中的网格结构进行“圣杯布局”，该网格结构由header 和三个并排占据浏览器视口（全高）的 div 组成。
In the first div , i have three textbox .在第一个 div中，我有三个文本框。
However, I notice that when i shrink the height of the browser , the following happens:但是，我注意到当我缩小浏览器的高度时，会发生以下情况：
The outer grid container which has the orange border seemed to continue to shrink beyond the child div .具有橙色边框的外部网格容器似乎继续缩小到子 div 之外。 Why is this happening?为什么会这样？ How do i ensure that it follows the height of its child div and not continue shrinking?我如何确保它遵循其子 div 的高度而不继续缩小？
* { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; }.container { border: 1px solid orange; display: grid; height: 100vh; grid-template-areas: "header header header" "usr1 usr2 usr3"; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr; grid-gap: 5px; } header { height: 3em; grid-area: header; border: 1px solid black; }.userinput { grid-area: usr1; border: 1px solid black; } input[type="text"] { min-height: 30vh; }.userinput2 { grid-area: usr2; border: 1px solid black; }.userinput3 { grid-area: usr3; border: 1px solid black; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <header> <h1>My Website</h1> </header> <div class="userinput"> <div class="textbox1"> <input type = "text" id="txt1" placeholder = "this is textbox 1"> </div> <div class="textbox2"> <input type = "text" id="txt2" placeholder = "this is textbox 2"> </div> <div class="textbox3"> <input type = "text" id="txt3" placeholder = "this is textbox 3"> </div> </div> <div class="userinput2"></div> <div class="userinput3"></div> </div> </body> </html>
1 个解决方案
解决方案1
0 2020-12-30 06:30:29
Add overflow: auto to the .container :将overflow: auto添加到.container ：
* { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; }.container { border: 1px solid orange; display: grid; height: 100vh; grid-template-areas: "header header header" "usr1 usr2 usr3"; grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr; grid-gap: 5px; overflow: auto; } header { height: 3em; grid-area: header; border: 1px solid black; }.userinput { grid-area: usr1; border: 1px solid black; } input[type="text"] { min-height: 30vh; }.userinput2 { grid-area: usr2; border: 1px solid black; }.userinput3 { grid-area: usr3; border: 1px solid black; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <header> <h1>My Website</h1> </header> <div class="userinput"> <div class="textbox1"> <input type = "text" id="txt1" placeholder = "this is textbox 1"> </div> <div class="textbox2"> <input type = "text" id="txt2" placeholder = "this is textbox 2"> </div> <div class="textbox3"> <input type = "text" id="txt3" placeholder = "this is textbox 3"> </div> </div> <div class="userinput2"></div> <div class="userinput3"></div> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.