Question

示例：www.mindout.com.br

我想要一个完整的内容，我的页面上没有滚动但不起作用，页脚位于内容之下，生成滚动条。

图像变大并占据整个空间，将页脚向下扔

     <style type="text/css">.content{
    height: 100%;
    width: 100%;
    background: green;
    position: absolute;}.header, #footer {
    height: 100px;
    width: 100%;
    background: red;}body {
    height: 100%;
    width: 100%;
    background: blue;}.look{width: 100%;height: 100%;}.bg1{
    background: #000000 url(./assets/bone1.jpg) !important;
    background-size: cover !important;
    height: 100%;
    width: 50%;
    display: block;
        float: left;
    }
.bg2{
    background: #000000 url(./assets/modelo1.jpg) !important;
    background-size: cover !important;
height: 100%;
width: 50%;
display: block;
    float: left;}

 <div class="content">
  <div class="header">
    <header class="site-header"> 
        <div class="header-wrapper">
            <div class="site-branding">
                <div class="site-logo">
                    <a href="https://www.mindout.com.br/" rel="home">
                        <img src="./assets/logo-transparente.png" alt="MINDOUT">
                    </a>
                </div> 
            </div>
            <div class="nav">
                <nav class="main-navigation-slices">                    
                    <ul class="menu-menu-primario">
                        <li><a href="http://www.mindout.com.br/">Home</a></li>
                        <li><a href="#">COLLECTIONS</a>
                        </li>
                    </ul>                
                </nav>    
            </div>
        </div>
    </header>
</div>
<div class="look">
    <div class="bg1"></div>
    <div class="bg2"></div>
</div>
<div class="footer">This is my footer</div>
</div>

Answer 1

您可以将您的正文或页面容器的高度设置为100vh，并隐藏溢出，这将使页面的所有内容都不会高于浏览器窗口。

然后包含您的标题和主页。

主要内容的主要元素应该大于或大于浏览器高度，您可以通过将高度设置为100％来强制执行此操作。

最后将页脚设置为固定在屏幕底部的位置。

我在下面加了一个演示

＆＃13;

body {
  height: 100vh;
  overflow: hidden;
  margin: 0;
}

header {
  background: blue;
}

footer {
  background: red;
  bottom: 0;
  left: 0;
  width: 100%;
  position: fixed;
}

main {
  height: 100%;
}

.pannel {
  float: left;
  width: 50%;
  background: green;
  height: 100%;
  position: relative;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

＆＃13;

  <header>header</header>
  <main>
    <div class="pannel">
      <span class="center">pannel</span>
    </div>
    <div class="pannel">
      <span class="center">pannel</span>
    </div>
  </main>
 
 <footer>footer</footer>

＆＃13;

页眉和页脚之间的内容为100％，没有滚动

1 个答案: