使用自动高度？
[英]Use auto height?
问题描述
I'm trying to do a website, but so far I'm stuck at auto height not working.
我正在尝试做一个网站，但到目前为止我被困在自动高度无法正常工作。
html { height: 100%; } body { background-color: black; margin: auto; height: 100%; }.top { background-color: aliceblue; position: absolute; top: 0px; width: 100%; height: 200px; }.menu { background-color: blueviolet; position: relative; margin: auto; top: 200px; width: 800px; height: 100px; }.m_one { background-color: aqua; position: relative; width: 20px; height: 20px; }.m_two { background-color: antiquewhite; position: relative; width: 20px; height: 20px; }.m_three { background-color: aquamarine; position: relative; width: 20px; height: 20px; ; }.m_four { background-color: blanchedalmond; position: relative; width: 20px; height: 20px; }.content { background-color: darkgrey; position: relative; top: 200px; left: 5%; right: 5%; width: 90%; height: auto; }.bottom_out { background-color: brown; position: absolute; bottom: 0px; width: 100%; height: 100px; }.bottom_in { background-color: azure; position: relative; width: 50px; height: 50px; }
<head> <link rel="stylesheet" href="styles.css"> <title>Whatever</title> </head> <body> <header> <div class="top">Something here </div> </header> <nav> <div class="menu"> <div class="m_one">One</div> <div class="m_two">Two</div> <div class="m_three">Three</div> <div class="m_four">Four</div> </div> </nav> <main> <div class="content">Text here </div> </main> <footer> <div class="bottom_out">Bottom <div class="bottom_in"></div> </div> </footer> </body>
I just can't figure out as to why body is so long.我只是想不通为什么身体这么长。
There probably might be issue with CSS and position, but that is the very reason I quit over 12 years ago. CSS 和 position 可能存在问题，但这正是我 12 年前退出的原因。
To my understanding it should work as expect, but it doesn't.据我了解，它应该按预期工作，但事实并非如此。
Website only looks well if I set fixed height for "content", but I want it to look as on the 2nd, that' how it should properly anyway.网站只有在我为“内容”设置固定高度时才看起来不错，但我希望它看起来像第二个，无论如何它应该如何正确。 Extending as more text is being added.随着更多文本的添加而扩展。
1 个解决方案
解决方案1
-2 2022-09-09 16:11:32
For a responsive full page height, set the body element min-height to 100vh.对于响应式整页高度，将 body 元素 min-height 设置为 100vh。
body{
min-height: 100vh;
}
Here is a link to a site that explains why: https://www.freecodecamp.org/news/html-page-width-height/#:~:text=For%20a%20responsive%20full%20page,to%20avoid%20surprise%20horizontal%20scrollbars .这是一个解释原因的网站的链接： https://www.freecodecamp.org/news/html-page-width-height/#:~:text=For%20a%20responsive%20full%20page,to%20avoid %20surprise%20horizontal%20scrollbars 。
html { height: 100%; } body { background-color: black; margin: auto; height: 100%; min-height: 100vh; }.top { background-color: aliceblue; position: absolute; top: 0px; width: 100%; height: 200px; }.menu { background-color: blueviolet; position: relative; margin: auto; top: 200px; width: 800px; height: 100px; }.m_one { background-color: aqua; position: relative; width: 20px; height: 20px; }.m_two { background-color: antiquewhite; position: relative; width: 20px; height: 20px; }.m_three { background-color: aquamarine; position: relative; width: 20px; height: 20px; ; }.m_four { background-color: blanchedalmond; position: relative; width: 20px; height: 20px; }.content { background-color: darkgrey; position: relative; top: 200px; left: 5%; right: 5%; width: 90%; height: auto; }.bottom_out { background-color: brown; position: absolute; bottom: 0px; width: 100%; height: 100px; }.bottom_in { background-color: azure; position: relative; width: 50px; height: 50px; }
<head> <.-- link rel="stylesheet" href="styles.css" --> <title>Whatever</title> </head> <body> <header> <div class="top">Something here </div> </header> <nav> <div class="menu"> <div class="m_one">One</div> <div class="m_two">Two</div> <div class="m_three">Three</div> <div class="m_four">Four</div> </div> </nav> <main> <div class="content">Text here </div> </main> <footer> <div class="bottom_out">Bottom <div class="bottom_in"></div> </div> </footer> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.