时间戳

首页 > 解决方案 > 使元素在没有 JS 的情况下占用 100% 的可见空白空间

css - 使元素在没有 JS 的情况下占用 100% 的可见空白空间

问题描述

所以......我如何只用 CSS 做这样的事情？观看红色元素，它缩放而不是滚动： 在此处输入图像描述

目前它通过 JS 工作，我根据计算的可用空间捕获元素的滚动和更新大小。

这就是它现在的工作方式： https ://codepen.io/bswan-the-decoder/pen/OJPVxZj

<div class="header">
   Header
</div>
<div class="header-spacer">
</div>
<div class="content">
  <div class="sidebar">
  </div>
  <div class="page">
  </div>
</div>
<div class="footer">
   Footer
</div>

body {
  background-color: black;
}
.header {
  position: fixed;
  width: 100%;
  top: 0px;
  left: 0px;
  min-height: 80px;
  background-color: #FFF;
  z-index: 500;
}


.footer {
  min-height: 50px;
  bottom: 0px;
  background-color: #FFF;
  left: 0px;
}

.page {
  min-height: 1000px;
  width: 50%;
  margin: 15px;
  margin-left: auto;
  margin-right: auto;
  background-color: #AAA;
}

.sidebar {
  position: fixed;
  background-color: #F66;
  left: 10px;
  top: 105px;
  width: 100px;
  height: 200px;
}

let header = document.querySelector('.header');
let footer = document.querySelector('.footer');
let sidebar = document.querySelector('.sidebar');
let header_spacer = document.querySelector('.header-spacer');
header_spacer.style.height = header.clientHeight+'px';

document.addEventListener('scroll',(event)=>{
   let height = window.innerHeight - header.clientHeight - 35;
   let scroll = this.scrollY;
   if(scroll+window.innerHeight+footer.clientHeight>=document.body.clientHeight)
   {
       height = (height - (
       (scroll+window.innerHeight+footer.clientHeight) 
       - document.body.clientHeight));
   }
   sidebar.style.height = height+'px';
});

这是我的新布局： https ://codepen.io/bswan-the-decoder/pen/wvBapvV

<body>
  <div class="header">

  </div>
  <div class="content">
    <div class="sidebar_holder">
      <div class="sidebar"></div>
    </div>
    <div class="page_holder">
      <div class="page"></div>
    </div>
  </div>
  <div class="footer">

  </div>
</body>

body{
  display: grid;
  grid-template-rows: min-content auto min-content;
  grid-template-columns: auto;
  grid-template-areas: "header" "content" "footer";
  background-color: #000;
  min-height: 100vh;
}

.header{
  grid-area: header;
  background-color: #FFF;
  min-height: 80px;
  position: sticky;
  top: 0px;
  z-index: 5;
}

.footer{
  grid-area: footer;
  background-color: #FFF;
  min-height: 40px;
}

.content{
  grid-area: content;
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: min-content auto;
  grid-template-areas: "sidebar page";
}

.sidebar_holder {
  grid-area: sidebar;
}

.page_holder {
  grid-area: page;
}

.sidebar {
  width: 100px;
  position: sticky;
  top: 105px; /*how to make it (header height+20px) ?*/
  height: 100px; /*How to make it (100vh - header height - visible height of footer)?*/
  background-color: #F66;
}

.page {
  height: 1000px;
  width: 50%;
  background-color: #AAA;
  margin: 25px;
  margin-left:auto;
  margin-right:auto;

}

更新：

@Roddy - 我试过了，但我缺乏知识，所以我没有任何用处。

标签： css

解决方案

要使用 div 填充整个空间，您可以使用ViewHeight和ViewWidth单位，例如：

vw并vh取屏幕大小的百分比并应用它，100vw 表示宽度的 100%





    .whole-area {
      height: 100vh;
      width: 100vw;
      background: orange;
    }


    <div class="whole-area">
    <span>Text</span>
    </div>

推荐阅读