Question

我试图提高我的CSS技能，现在很多网站都有这个设计模式的单个列有不同的部分。我试图用'section'css类来模仿这种行为，它将（现在）始终是屏幕的大小。因此，结果将是单个列中的许多部分，其中每个部分都是屏幕的大小。要将一个部分设置为屏幕大小，我将其设置为绝对位置并设置顶部/左侧/底部/右侧，但是如何将其缩放到多个部分？

Answer 1

我不确定我是否完全理解，但如果你想要并排三列，你可以做的就是这样：

div.one, div.two, div.three {
    position:absolute;
    top:0px;
    bottom:0px;
}
div.one {
    left:0px;
    width:33%;
}
div.two {
    left:33%;
    width:33%;
}
div.three {
    left:66%;
    width:34%;
}

这将创建三个绝对定位的列，但具有动态宽度和偏移量。

此外，使用CSS，您现在可以根据视口的一侧指定宽度和高度。你还可以这样做：

div.one, div.two, div.three {
    display:inline-block; /* multiple divs on one line! */
    height:100vh; /* 100% of the height of the viewport */
    width: 33.3vw; /* 33% of the width of the viewport */
}

这将创建三个<div>，其分辨率为视口的100％和宽度的33％。由于视口（本质上是浏览器文档窗口）可以缩放，因此元素会自动调整大小。这曾经是使用Javascript完成的，但CSS3规范引入了vh和vw的单位，现在大多数浏览器都支持它们。我在此JSFiddle中已经证明了这一点。

编辑：你要求的是什么，我只有一半左右。而不是33％宽度的列，您需要高度为33％的行。我离开了我原来的东西，因为它解释了如何使用这些单元，但是我从我们的评论中包含了这些。

因为在根据文档的高度调整大小时，您无法使用height:33%;，实际上您只想按指定的方式反转单位。使用我上面描述的单位，制作三行33％高度的方法如下：

div.one, div.two, div.three {
    display:inline-block; /* multiple divs on one line! */
    height:33.3vh; /* 33.3% of the height of the viewport */
    width: 100vw; /* 100% of the width of the viewport */
}

这在this JSFiddle中得到证明。

Answer 2

如果我理解正确，那么您需要使用box-sizing属性。

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

*:before, *:after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}

section {
    width: 100%;
}

这将允许section触及浏览器窗口的整个宽度。

Answer 3

通过将所有部分放在一个公共类中，您可以使用jQuery完成类似的操作。然后，您将确定最高部分的高度，并将每个部分设置为该高度。

示例部分：

    <div class="col" style="background-color: red; float: left; height: 100px;">
        test
    </div>
    <div class="col" style="background-color: blue; float: left; height: 300px;">
        test
    </div>
    <div class="col" style="background-color: green; float: left; height: 800px;">
       test
    </div>

使用Javascript：

$(function() {
      $(".col").each(function() {
           maxHeight = 0;
           if ($(this).height() > maxHeight) {
                maxHeight = $(this).height();
           }
      });
      if (maxHeight > 0) {
           $(".col").each(function() {
                $(this).css("height", maxHeight);
           });
      }
});

Answer 4

如果我理解正确，您希望宽度填满窗口。你可以这样做：

HTML：

<div class="section">this is a section</div>

的CSS：

.section { width: 100%; }

应该是你真正需要的。为了能够看到它你需要改变背景颜色等。但你可能知道如何做到这一点。

制作所有大小屏幕的单列div

4 个答案: