Question

我无法强制我的几个元素成为浏览器窗口的100％高度。我希望.blank和.sidebar填充100％的高度，无论他们持有多少内容（使用overflow-y: scroll;

应该处理任何溢出

谢谢！

HTML

<body>
  <aside class="sidebar about">
      <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h5>
      <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h5>
  </aside>
  <div class="blank"></div>

  <header>
    <h1>Header</h1>
  </header>

  <main>
    <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h5>
    <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h5>
    <h5>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h5>
  </main>
  <footer>
    <h1>Footer</h1>
  </footer>


</body>

CSS

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    position: relative;
    background: grey;
    color: white;
}

.sidebar {
  width: 50%;
    height: 100%;
  position: absolute;
  top: 76px;
    right: 0;
    margin: 0;
  padding: 30px 80px 60px;
    z-index: 3;
    overflow-y: scroll;
    background: black;
}

.blank {
    background: linear-gradient(to left, transparent 0%, cyan 75%);
  width: 100%;
    height: 100%;
  opacity: 0.7;
  position: absolute;
  top: 0;
    left: 0;
    z-index: 2;
}

header {
    width: 100%;
    height: 28px;
    position: absolute;
  left: 0;
  top: 0;
  background: red;
  padding: 24px 0px;
    z-index: 4;
}

main {
    margin: 76px 0 150px 0;
}

footer {
    width: 100%;
  height: 175px;
  left: 0;
  bottom: 0;
    z-index: 1;
  background: yellow;
}

Answer 1

use vh its for viewport height.

所以而不是

?wall=1

使用

<!--load to bottom if posting on wall-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
 var wall=<?php echo $_GET['wall'];?>;
 if (wall===1) {
   window.scroll(0,document.body.scrollHeight)
 }
</script>

并设置高于〜768px高度的媒体查询的修复高度，因为尤其是ios和其他一些浏览器无法处理它。

see browser which can viewport units

另一个解决方案是使用jquery，但我不建议在这种情况下使用jquery。

无法显示更新的小提琴，因为渲染的页面不是整个视口..

更新

你需要设置侧栏这个css：

height: 100%;

问候timotheus

无法强制绝对定位的元素填充100％的视口/站点

1 个答案: