我正在尝试创建一个 body 容器，它占据了我桌面屏幕上的整个空间，这正是我想要的。但是，当我将其调整到移动屏幕时，我希望它能够响应。它只占手机屏幕四分之一的空间。我也不希望我的页脚容器和主体容器重叠。我可以用 overflow: auto 修复它。但是，我不希望出现这种情况。我不希望用户滚动浏览我的 body ，而是静态的。更喜欢我的容器粘在底部。这是屏幕截图和我的代码:
HTML
<div class="header-container">
<i class="fa fa-space-shuttle fa-spinner fa-spin fa-3x"></i>
</div><br>
<div class="body-container">
<h1 class="body-title">The Mihir Chronicles</h1><br>
<div class="body-content">
<p>Hi, I am Mihir (me-here). I am a <strong>full-stack web developer</strong> and an entrepreneur based in Chicago. Previously, founded a social enterprise venture, <strong>Humble Pen</strong> and co-founded Royal Ace Investments.</p>
<p>Aside from my entrepreneurial endeavours, I’ve also worked for several venture-backed startups. Currently, I am a mentor at Dev Mountain. Lately, I've been fascinated by programming. Usually, I am on my computer learning new frameworks and technologies.</p>
<p>I am absolutely passionate about <strong>finance, programming</strong> and <strong>technology</strong>. I find <strong>art</strong> and <strong>astronomy</strong> to be absolutely cool. On the weekends, I volunteer as a <strong>Telescope Instructor</strong> at the Adler Planetarium. I usually read a lot when I am not working.</p>
</div>
<h2 class="body-end">-Mihir (me-here!)</h2>
<a href="http://themihirchronicles.tumblr.com"><button class ="btn" type="text">Enter!</button></a>
<!-- <button class ="btn" type="text">Essays</button> -->
</div><br>
<div class="footer-container">
<ul>
<li><a href="https://github.com/mihirchronicles"><i class="fa fa-github fa-2x"></i></a></li>
<li><a href="https://twitter.com/mihirchronicles"><i class="fa fa-twitter fa-2x"></i></a></li>
<li><a href="https://instagram.com/mihirchronicles"><i class="fa fa-instagram fa-2x"></i></a></li>
<li><a href="https://www.linkedin.com/in/mihirchronicles"><i class="fa fa-linkedin fa-2x"></i></a></li>
<li><a href="mailto:mihirptl89@gmail.com"><i class="fa fa-envelope-o fa-2x"></i></a></li>
<li><a href="http://themihirchronicles.tumblr.com/"><i class="fa fa-rss fa-2x"></i></a></li>
</ul>
</div>
CSS
* {box-sizing: border-box;}
html, body {
height: 100%;
width: 100%;
margin: 0 auto;
padding: 0;
}
.header-container {
color: #2789e5;
margin: 0 auto;
text-align: justify;
height: 15%;
width: 85%;
padding-top: 25px;
}
.body-container {
margin: auto;
text-align: left;
height: 60%;
width: 85%;
font-family: serif;
font-size: 12px;
/*overflow: auto;*/
border: dotted;
position: absolute;
left: 0;
right: 0;
}
.footer-container {
margin: 0 auto;
text-align: right;
width: 85%;
height: 10%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
border: dotted;
}
.body-title {
font-family: 'Reenie Beanie', cursive;
}
.body-content {
font-family: "Courier New", Courier, monospace;
}
.body-end {
font-family: 'Reenie Beanie', cursive;
}
ul li {
list-style-type: none;
float: left;
}
a {
color: #70a2d1;
}
ul li a i:hover {
opacity: .8;
}
li {
margin: 0 0 0 15px;
}
@media only screen and (max-width: 300px) {
.body-container {
font-size: 1.5em;
}
}
手机屏幕截图
最佳答案
<meta name="viewport" content="width=device-width" />
我想你是这个意思。 把它放在你的
<head>
部分，并尝试它希望它适合你。
对于媒体查询，我无法帮助您，因为我讨厌它们。
overflow-x:hidden;
overflow-y:auto;
关于html - 当窗口大小减小时，使用媒体查询来增加我的主体容器的高度大小时，它将不起作用。，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32256221/