Question

好的，我知道不同用户在不同情况下可能会问过这个问题，但我真的被困在这里，我已经尝试了大部分建议。问题是我无法让内容占据整个空间。随着屏幕分辨率（1920 * 1080,1366 * 766,1024 * 768）等的降低，总会有一个小的差距，并且当分辨率降低时，页脚和主要内容之间的差距会继续变大。

我将附上所有图像。我正在使用角度引导程序，这是我的代码结构

    <body>
      <header>
        <div class="container-fluid">
        .....
        </div>
      </header>
      <div class="container-fluid" style="padding-left:0px;">
       <!-- Inspite of adding row padding was not getting negated -->
       <div class="row">
        <div class="col-sm-9">Angular UI Carousel Code Here</div>
        <div class="col-sm-3">Login Form Code Here</div>
       </div>
      </div>
      <footer>
       <div class="container-fluid">
        .....
       </div> 
     </footer>
    </body>

使用的CSS（以及bootstrap css - angular variant）

html {
  min-height: 100% !important;
}

body {
    padding-top: 75px;
    color: #34495e;
    background: #f5f5f5;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    letter-spacing: 0.5px;
    margin-bottom: 40px;
}
footer {
    padding-top: 10px;
    border-top: 1.5px solid #54A275;
    font-size: 12px;
    color: black;
    height: 40px;
    bottom: 0;
    position: absolute;
}

正文有一个padding-top:75px来容纳75px高的标题

1920 * 1080 1366 * 768 1024 * 768

如何确保使用全屏空间？

Answer 1

是否有我们可以看到该页面的网址？我在这里看到不同的宽高比。 1024x768是4：3，另外两个是16：9（1366 * 768几乎是16：9）。您的图像可能是16：9比例，因此当您将分辨率更改为4：3并且由于图像按比例重新调整大小时，可能会有空格或间隙。

Answer 2

Add the following styles to the <div> next to the <header> tag:

</header>
  <div class="container-fluid" style="ADD STYLES HERE">


padding-left: 0px;
background-color: red;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
padding-top: 75px;
padding-bottom: 40px;

Bootstrap（Angular），主要内容不占据全高

2 个答案: