Question

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

我已尝试在background-size: cover;中使用body以及#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

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

<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元素而不是正文，并且我使用了一个类，这对于CSS来说更可取，因为它使它更具可重用性和健壮性。

Answer 2

关于渐变的问题＆＃39;消失＆＃39;在调整大小时，如果你改变

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

到

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

它应该解决这个问题。也允许你使用

 #title {margin-top: 150px;

没有任何截止 - 但是，如果你希望你的设计有响应（听起来有点像你） - 我建议你使用ems或％作为边距，使它更加一致。< / p>

您可以看到fiddle here

Answer 3

尝试添加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;
}

如何定位网格元素

3 个答案: