Question

我正在创建一个包含HTML / CSS并使用一点引导程序的登录页面。在打开页面时，我无法调整主页面的大小以适应100％的高度和宽度。

我希望它看起来像谷歌文档的主页：https://www.google.com/docs/about/。如果你去那里，你会看到：

导航处于固定位置，随处可见。我把那部分搞定了。
主图像会根据您的屏幕尺寸自动调整大小。始终可以在图像底部看到icon-arrow-hint（页面中间的箭头）。

我遇到两个问题：

即使我设置right: 0，也会在右侧出现这种奇怪的差距。

页面加载后，看起来它适合大约90％的高度，我仍然需要向下滚动。我把这个文本放在底部 - 理论上，这应该显示在屏幕的底部而不滚动，但我必须总是略微向下滚动。

这是JSfiddle：https://jsfiddle.net/iggyfiddle/DTcHh/35435/

我正在使用position: absolute而我正在使用所有4个方面。

如何很好地适应黄色div 100％高度和100％宽度，就像Google页面一样？

Answer 1

如果你给了一个元素height: 100%，但在同一个容器中有另一个元素在上面或下面，你需要调整另一个元素的高度，否则会出现溢出。 / p>

此外，调整Bootstrap应用的-15px水平边距。

试试这个：

.primary-content {
    position: absolute;
    top: 10%;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 90%;          /* ADJUSTMENT */
    background: yellow;
    margin: 0;            /* NEW */
}

https://jsfiddle.net/DTcHh/35437/

Answer 2

你的.primary-content div上有bootstrap .row类，它声明了负水平边距。解决方案是从div中删除.row类或覆盖css中的边距。

这些是默认的bootstrap .row styles：

arr3

Answer 3

您的黄色div走得太远的原因是您需要将高度设置为90%。

要修复右侧的奇怪填充，请添加margin: 0 !important;。

.primary-content {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 90%; // change this
  background: yellow;
  margin: 0 !important; // add this
}

请参阅此JSFiddle或运行下面的代码段

＆＃13;

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

.universal-header {
  background: red;
  border-radius: none;
  height: 10%;
  width: 100%;
  position: fixed;
}

.color-brown {
  color: #58482C;
  text-decoration: none;
}

.primary-content {
  position: absolute;
  top: 10%;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 90%;
  background: yellow;
  margin: 0 !important;
}

.bottom {
  position: absolute;
  bottom: 0;
  right: 0;
}

＆＃13;

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar universal-header navbar-static-top">

<a class="navbar-brand navigation-title color-brown">

  </a>
  <span class="color-brown navbar-brand navigation-title">HELLO</span>
  
  <span class="navbar-brand navigation-title pull-right color-brown">Login</span>
    <span class="navbar-brand navigation-title pull-right color-brown">Features</span>
    <span class="navbar-brand navigation-title pull-right color-brown">About</span>
</nav>

<div class="row primary-content">
  <div class="col-md-12">
    <h1>This is a super awesome product</h1>
    <h4>Help me stackoverflow, you are my only hope!</h4>
  </div>
  <div class="bottom">
    You should be able to see me without scrolling
  </div>
</div>

＆＃13;

Answer 4

使用.row类增加15px的余量。一个快速解决方法是从主内容div中删除类，如此。

    <div class="primary-content">
  <div class="col-md-12">
    <h1>This is a super awesome product</h1>
    <h4>Help me stackoverflow, you are my only hope!</h4>
  </div>

或添加一个类并删除边距。

Answer 5

问题1：

右侧有这个奇怪的差距

使用bootstrap的RegExp_Substr_gpl( col2, '(~|^)([^~]*?ABCD.*?#.*?)(~|$)',1,1,'i',2)课程时，它会在div的左右两侧添加-15px的边距，如果你想更好地理解为什么，请参阅this question的第二个答案

解决方案：不要将row类用于row div。

问题2：

这应该显示在屏幕的底部而不滚动，但我必须总是略微向下滚动

您正在使用primary-content定位，请记住，在您的情况下需要absolute定位的父容器，因为您没有，所有内容都与初始包含相关阻止，因此你的视口/窗口。

快速修复：从relative

删除height: 100%; css

警告：如果您想在黄色容器下添加更多内容，请按照现在的方式使用绝对定位会给您带来麻烦

CSS如何适应100％的高度和宽度？

5 个答案: