当 window 大小减小时，使用媒体查询来增加我的 body 容器高度的大小时，它将不起作用。

Question

我正在尝试创建一个 body 容器，它占据我桌面屏幕上的整个 space，这正是我想要的。但是，当我将其调整到移动屏幕时，我希望它能够响应。它只占移动屏幕 space 的四分之一。我也不希望我的页脚容器和 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;
  }
}

手机屏幕截图

Answer 1

<meta name="viewport" content="width=device-width" />

我想你是这个意思。把它放在你的

<head>

部分，尝试一下希望它对你有用。

对于媒体查询，我无法帮助你，因为我讨厌它们。

overflow-x:hidden;
overflow-y:auto;

当 window 大小减小时，使用媒体查询来增加我的 body 容器高度的大小时，它将不起作用。

It won't work when using media query to increase the size of the height of my body container when window size reduces.

html

css

media-queries

responsive-design