Question

我正在寻找解决方案，该问题是我的中间内容div（主要内容）无法针对响应屏幕自动调整-它会针对内容进行调整。

如果我将高度设置为100％，则它会从页面上移下并看不见。我不想将页脚停留在页面底部，因为一旦转到其他屏幕尺寸，该页脚便会保留在前一个屏幕的位置或内容在页脚下方滚动。

我在下面列出了基本的html和CSS。我很高兴提供脚本解决方案。

html, body {
    width: 100%;
    margin: 0;
    height: 100%;
    padding: 0 !important;
    font: normal 1.2rem "brandon-grotesque", arial, sans-serif;
    color: midnightblue;
}

#container {
    width: inherit;
    height: inherit;
    min-height: 100%;
    padding: 0;
    position: relative;
    display: flex;
    flex-flow: column;
}

#topbar {
    color: navy;
    width: 100%;
    text-align: right;
    font: normal 0.8rem "Droid Sans", arial, sans-serif;
    background-image: url("xxx");
    height: 50px;
    background-color: snow;
}

#logged {
    background: rgba(255,255,255,0.7);
    width: 16%;
    padding: 1.2rem;
    margin: 0;
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 70%;
}

#headerBar {
    margin: 0 auto;
    padding: 1rem;
    width: 70%;
}

#navigation {
    margin: 0;
    padding:1.5rem;
    width: 100%;
}
#content_upper {
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
#main-content {
    clear: both;
    padding: 1% 3%;
    margin: 0 auto;
    background-color: #f9f9f9;
    height: 100%;
}
#footer {
    clear: both;
    bottom: 0px;
    width: 100%;
    display: inline-flex;
    padding: 2%;
    background-color: navy;
    min-height: 10%;
    color: white;
    font: normal 0.8rem "Droid Sans", arial, sans-serif;
}

<html>
<body>
   <container>
      <topbar></topbar>
      <logged></logged>
      <headbar></headbar>
      <navigation></navigation>
      <content_upper></content_upper>
      <main-content></main-content>
      <footer></footer>
   </container>
</body>
</html>

Answer 1

在#main-content中，您需要将height: 100%替换为flex-grow: 1。这样，#main-content将占用最多的可用列空间。

#main-content {
  /* height: 100% */
  flex-grow: 1;
}

此外，如果没有box-sizing: border-box，这些#navigation样式也会导致水平滚动条。

#navigation {
  …
  padding:1.5rem;
  width: 100%;
}

要解决此问题，我添加了：

* {
  box-sizing: border-box;
}

演示

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  margin: 0;
  height: 100%;
  padding: 0 !important;
  font: normal 1.2rem "brandon-grotesque", arial, sans-serif;
  color: midnightblue;
}

#container {
  width: inherit;
  height: inherit;
  min-height: 100%;
  padding: 0;
  position: relative;
  display: flex;
  flex-flow: column;
}

#topbar {
  color: navy;
  width: 100%;
  text-align: right;
  font: normal 0.8rem "Droid Sans", arial, sans-serif;
  background-image: url("xxx");
  height: 50px;
  background-color: snow;
}

#logged {
  background: rgba(255, 255, 255, 0.7);
  width: 16%;
  padding: 1.2rem;
  margin: 0;
  position: absolute;
  right: 0px;
  top: 0px;
  font-size: 70%;
}

#headerBar {
  margin: 0 auto;
  padding: 1rem;
  width: 70%;
}

#navigation {
  margin: 0;
  padding: 1.5rem;
  width: 100%;
}

#content_upper {
  width: 100%;
  margin: 0 auto;
  padding: 0;
}

#main-content {
  clear: both;
  padding: 1% 3%;
  margin: 0 auto;
  background-color: #f9f9f9;
  flex-grow: 1;
}

#footer {
  clear: both;
  bottom: 0px;
  width: 100%;
  display: inline-flex;
  padding: 2%;
  background-color: navy;
  min-height: 10%;
  color: white;
  font: normal 0.8rem "Droid Sans", arial, sans-serif;
}

<html>

<body>
  <div id="container">
    <div id="topbar"></div>
    <div id="logged"></div>
    <div id="headbar"></div>
    <div id="navigation"></div>
    <div id="content_upper"></div>
    <div id="main-content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae magnam dolores
    </div>
    <div id="footer"></div>
  </div>
</body>

</html>

Answer 2

尝试在页脚部分添加顶部：90％

#footer {
    clear: both;
    top: 90%;
    bottom: 0px;
    width: 100%;
    display: inline-flex;
    padding: 2%;
    background-color: navy;
    min-height: 10%;
    color: white;
    font: normal 0.8rem "Droid Sans", arial, sans-serif;
}

在执行此操作时，它应该位于页面顶部的90％处

页眉和页脚之间的内容分隔高度为100％

2 个答案:

演示