CSS布局101 - 在构造布局中困惑 [英] CSS Layouts 101 - getting confused in structuring layout

问题描述

对于这种布局，使用纯css可以找到的最简单的结构化方法是使用 vh 单元。

目标布局是一个非常简单的方法，因为它只支持CSS。

我只能获得全屏幕封面图片，第1节和第2节。 >
问题 -

1.页脚正对齐封面图片的底部。

2.第2部分中的任何文本都将填充在第2部分的空格之间。 （strange？）

根据我的分析

  html，
 body {
 height：100％; 
 position：relative; 
} 
  

是罪魁祸首。删除这个，允许实现目标布局，但是设计和样式丢失了。

我有很多第2节中的图像在网格中对齐，显示保留纵横比。

问题是两折 -

1.可能的正确CSS代码

2.为什么它发生了，以及如何掌握造型的百分比方法。

https://jsfiddle.net/e1bpfdt5/

（使用Bootstraps Sticky Footer参考结构）

感谢。

PS - 无Javascript

解决方案

您正在寻找：

  * {box-sizing：border-box;} html，body {margin：0; padding：0; font-size：22px; text-transform：uppercase;} body {padding-top：100vh;}。 left：0; right：0; top：0; bottom：0;背景：#eee;显示：flex; align-items：center; justify-content：center; z-index：1000;} footer {background：＃222; color：#fff;显示：flex; height：60px; align-items：center; justify-content：center; z-index：999;} section {padding：10px; margin：25px; border：1px solid＃000;}  

 < div class =cover> cover< / div>< section>部分1< br />部分1< br />部分1< br />部分1< br />部分1< br / < br />< / section>< section>部分2< br />部分2< br />部分2< br />部分2< br />部分2< br / < br />部分2< br />部分2< br />部分2< br />部分2< br />< / section>部分3< br />部分3< br />部分3< br />部分3< br />部分3< br / < br />部分3< br />部分3< br />部分3< br />部分3< br / br />< / section>< footer> footer< / footer>  

For this layout, the easiest structuring method I can find with pure css is by using the vh unit.

Since its a bit restrictive in its support and the requirement being to go with only CSS, I am having a hard time working with the percentage method properly.

Target layout

I can only get full-screen cover image, section 1 and section 2 right.
Issues -
1. Footer is aligning over and bottom of the cover image.
2. Any text in Section 3 gets filled in between spaces in Section 2. (strange?)

From my analysis

html,
body {
  height: 100%;
  position: relative;
}

is the culprit. Removing this, allows to achieve the target layout but the designing and styling is lost.

I am having lots of images in Section 2 aligned in grid, displayed preserving aspect ratio.

Question is two fold -
1. Possible proper css code
2. Why it happened and how to master the percentage method of styling.

https://jsfiddle.net/e1bpfdt5/
(Using Bootstraps Sticky Footer reference structure)

Thanks.
PS - No Javascript

解决方案

Check if this is what you are looking for:

* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  font-size: 22px;
  text-transform: uppercase;
}
body {
  padding-top: 100vh;
}
.cover {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
footer {
  background: #222;
  color: #fff;
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
section {
  padding: 10px;
  margin: 25px;
  border: 1px solid #000;
}

<div class="cover">cover</div>

<section>
  section 1
  <br/>section 1
  <br/>section 1
  <br/>section 1
  <br/>section 1
  <br/>section 1
  <br/>section 1
  <br/>
</section>

<section>
  section 2
  <br/>section 2
  <br/>section 2
  <br/>section 2
  <br/>section 2
  <br/>section 2
  <br/>section 2
  <br/>section 2
  <br/>section 2
  <br/>section 2
  <br/>section 2
  <br/>
</section>

<section>
  section 3
  <br/>section 3
  <br/>section 3
  <br/>section 3
  <br/>section 3
  <br/>section 3
  <br/>section 3
  <br/>section 3
  <br/>section 3
  <br/>section 3
  <br/>section 3
  <br/>section 3
  <br/>section 3
  <br/>
</section>

<footer>footer</footer>

这篇关于CSS布局101 - 在构造布局中困惑的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！