Question

HTML：

<section>
  <aside> </aside>
  <article> </article>
</section>

我的身高aside =身高article，但不低于浏览器身高。

这是一个jsfiddle：https://jsfiddle.net/demas/4hzLbt78/

现在aside =浏览器高度的高度，但是当article的内容很大时，我在页面左侧有一个空白区域（在它们的底部）

更新：我使用jeet网格（http://jeet.gs/），无法更改float: left和aside的{{1}}。

Answer 1

由于事先知道aside元素的宽度，一个选项是将元素 relative 绝对定位到父section元素，然后取代在margin-left添加article。

aside元素现在可以与父元素具有相同的高度（使用top: 0; bottom: 0），并且由于父元素的高度由article元素的高度决定， aside / article元素的高度相同。

Updated Example

section {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

aside {
  width: 18%;
  color: #feffff;
  background-color: #2a5c83;
  position: absolute;
  top: 0;
  bottom: 0;
}

article {
  float: left;
  width: 76%;
  margin-left: 20%;
}

<section>
  <aside></aside>
  <article>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.
  </article>
</section>

备选方案：

使用flexbox布局：

section {
  min-height: 100vh;
  display: flex;
}

aside {
  width: 18%;
  color: #feffff;
  background-color: #2a5c83;
  margin-right: 2%;
}

article {
  width: 76%;
}

<section>
  <aside></aside>
  <article>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.
  </article>
</section>

使用display: table / display: table-cell：

section {
  min-height: 100vh;
  display: table;
}

aside {
  width: 18%;
  color: #feffff;
  background-color: #2a5c83;
  display: table-cell;
}

article {
  width: 76%;
  display: table-cell;
}

<section>
  <aside></aside>
  <article>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempor at massa et rutrum. Duis ac viverra lorem. Integer volutpat, libero a molestie suscipit, nisi lacus elementum nisi, non cursus arcu sapien id mauris. Nullam dignissim diam eu tellus varius finibus. Nam consectetur, libero vel efficitur malesuada, nunc enim laoreet tellus, id ornare ipsum lacus vel ligula. Pellentesque semper scelerisque enim, id euismod enim accumsan sit amet. Pellentesque vel vulputate lorem, eu ornare turpis. Duis rhoncus purus eu mi rutrum, eu pellentesque enim dignissim. Aenean felis nisl, ultrices eget placerat eget, viverra a mi.
  </article>
</section>

Answer 2

Flexbox，显然

section {
    height: 100vh;
    display: flex;
}

Jsfiddle Demo

设置<aside>元素的高度等于<article>元素的高度但不低于浏览器

2 个答案:

备选方案：