css - HTML/CSS - 并排放置几个 DIV 元素，每个 div 是浏览器的 100% 宽度/高度

Question

我无法弄清楚这一点，它可能相当简单。我有几个 DIV 元素需要并排放置（中间没有边距），并且每个 div 的设置宽度必须为浏览器宽度的 100%，最小高度为浏览器的 100%。

就像我说的那样，我确信有一个快速简便的技巧，我只是在我的研究中找不到太多。非常感谢！

更新：这似乎工作： http: //pastebin.com/kuQyfwuG

Answer 1

也许您可以将所有 div 包装在一个容器 div 中，该容器 div 的宽度比浏览器的宽度大很多（或者至少是所有并排放置的 div 的总宽度）：

HTML

<div id="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

CSS

body {
  overflow: hidden;
}

#container {
  width: 10000px;
  height: 100%;
}

.element {
  min-height: 100%;
  ...
}

jQuery

$('.element').css('width', window.innerWidth);

body被赋予了属性overflow: hidden;，因此不会因为#container' 的大小而显示水平滚动条。并且由于给.element定 100% 的宽度将使其与#container元素一样宽，因此您可以添加一点 jQuery 以使其宽度等于窗口/浏览器的宽度。