CSS

Question

我想根据屏幕尺寸动态调整窗口高度，所以这（第一张图片）不会发生：

下面是我的HTML和jQuery - 有没有办法在不添加pageContent div的情况下做到这一点？并且，如果可能的话，以更简洁/更清洁的方式。谢谢！

＆＃13;

$(document).ready(function() {

  var divH = $(".newRow").outerHeight();
  var numDivs = $(".newRow").length;
  var contentH = $(".pageContent").height(divH * numDivs + 10);

  var footerH = $(".page-footer").height() + 12;
  var headerH = $(".mainMenu").height();


  $(window).resize(function() {
    $(contentH).height($(window).height() - footerH - headerH);
  });

  $(window).trigger('resize');

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pageContent">
  <div class="row cingapura newRow narrow simpleDoubleIcon">
    <div class="rowOne faq">
      <h3>Dúvidas frequentes </h3>
    </div>
  </div>

  <div class="row cingapura newRow narrow simpleDoubleIcon">
    <div class="rowOne turnOn">
      <h3>Religar serviço</h3>
    </div>
  </div>
</div>

＆＃13;

Answer 1

您可以使用不带Javascript的flexbox

来完成

<body class="site">
  <main class="content">
    ...
  </main>
  <footer class="footer">
    ...
  </footer>
</body>

.site {
  display: flex;
  min-height: 100vh; /* set body height equal to viewport */
  flex-direction: column;
}

.content {
  flex: 1;  /* allow content to grow to remaining space */
}

Source

Answer 2

如果您希望页脚始终位于底部，请尝试使用

.footerClass {
 position: absolute;
 right: 0;
 bottom: 0;
 left: 0;
}

Answer 3

我猜你的页脚应该始终位于页面底部。因此，主体必须覆盖整个屏幕高度，然后页脚需要与底部对齐。这一切都可以通过CSS修复。

CSS

body {
    position: relative;  // make body the element the footer can be aligned with
    min-height: 100%;  // body covers AT LEAST the whole screen, even if there is less content
    margin: 0;
    padding: 0;
}

#content {
    margin-bottom: XY; // see chapter "When JS is necessary"
}

footer {
    position: absolute;  // footer aligns absolute within related body
    bottom: 0;
    width: 100%;
}

HTML

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="content">
            I am content and don't want to be covered!!! <br>
            Thank you for paying attention on that, dear developer :*
        </div>
        <footer>My Footer is here</footer>
    </body>
</html>

当需要JS时

不要忘记：页脚将覆盖页面底部的内容。这就是为什么你必须在最后一点内容和页面结束之间定义空间的原因。空间需要至少与页脚高度相同。如果页脚的高度已知并且是静态的，您可以通过包装内容并为其提供边距（如上例中所示）来执行此操作。如果高度发生变化而无法用CSS表示，那么你也必须使用JS。这样做如下。

的JavaScript

function setContentSpace() {
    var footer = document.getElementByTagName("footer")[0];
    var content = document.getElementById("content");

    if (footer != null && content != null) {
        content.style.marginBottom = footer.offsetHeight + "px";
    }
}

根据div高度动态调整窗口大小

3 个答案:

CSS

HTML

当需要JS时

的JavaScript