如何定位网格元素

Question

我遇到问题，对于 example，我使用 top: 150px; 在页面上的某个地方放置了一个标题但是，一旦我开始减小我的 window 大小，它就会切断我的背景。我意识到使用像 top/bottom/left/right 或 margin-top 这样的标签会导致这种情况发生，因为它想留在那个特定的地方并且不会随着 window.[=20= 一起减小尺寸]

我已经尝试在我的 body 中使用 background-size: cover; 并在我的 #title 中使用各种位置，但仍然无法解决这个问题。

CSS

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#gradient {    
    background: #00BFFF;
    background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
    background: linear-gradient(to right bottom, #086A87, #00BFFF);
    border-radius: 2px;
    /*    background-size:cover;*/
    background-size:100% 100%;
    background-repeat: no-repeat;
}

#title {
    font-size: 60px;
    color: #FF8000;
    /*    margin-top: 150px;*/
    /*    position: fixed;*/
    /*    position: relative;*/
    top: 150px;
}

HTML

<html>
 <body id="gradient">

<!-- Title -->
 <div class="row ">

    <div id="title" class="small-16 large-12 large-centered text-center columns">Example</div>

  </div>
 </body>
</html>

放置网格元素以消除此类问题的最佳方式是什么？

我很难使用网格系统在页面上定位元素。

谢谢！

编辑：已更新HTML

编辑 2：如果您将高度调整到非常小，您就会看到我的问题。 http://codepen.io/anon/pen/RNXrMM

Answer 1

关于调整大小的渐变问题'disappearing'，如果你改变

html {
    width: 100%;
    height: 100%;

到

html {
    width: 100%;
    min-height: 100%;

应该可以解决这个问题。还允许您使用

 #title {margin-top: 150px;

没有任何截止 - 但是，如果您希望您的设计具有响应性（这听起来有点像您所做的）- 我建议您使用 ems 或 % 作为您的边距，以使其更加一致。

你可以看到 fiddle here

Answer 2

尝试添加 min-width:1000px 您可以根据需要设置像素

CSS 代码：-

html {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    min-width: 1000px;
}

#gradient {    
    background: #00BFFF;
    background: -webkit-linear-gradient(to right bottom, #086A87, #00BFFF);
    background: linear-gradient(to right bottom, #086A87, #00BFFF);
    border-radius: 2px;
    /*    background-size:cover;*/
    background-size:100% 100%;
    background-repeat: no-repeat;
}

#title {
    font-size: 60px;
    color: #FF8000;
    /*    margin-top: 150px;*/
    /*    position: fixed;*/
    /*    position: relative;*/
    top: 150px;
}

Answer 3

这里的核心问题是您不应该定位或设置网格元素的样式（背景可能除外）。将您的标题元素放在内容所属的网格中，并相应地设置样式。

<div class="gradient">
    <div class="row header">
        <div class="small-16 large-12 large-centered text-center columns">
          <div id="title">Example</div>
        </div>
    </div>
 </div>

Demo

请注意，我已将背景移动到 div 元素而不是 body，并且我使用了 class，这更适合 CSS 因为它使它更具可重用性和健壮性。

如何定位网格元素

How to position grid elements

html

css

grid-layout

zurb-foundation