css让父母的div 100％身高和儿童可滚动

我正在尝试创建一个填充所有垂直空间的框架的网站，例如，变得更小并且溢出的内容变得可滚动。css让父母的div 100％身高和儿童可滚动

html和身高被设置为100vh，并且所有的父框都设置为100％。我还没有找到另一种方法，这导致每个父母都是100vh，并最终导致网站溢出。

我在做什么错？我觉得自己像一个上午只是缺少合适“的位置：”属性...

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Pastebook</title> 
 
    <style type="text/css"> 
 
    html, 
 
    body { 
 
     height: 100vh; 
 
    } 
 
    /*central panel*/ 
 
    .central { 
 
     position: absolute; 
 
     width: 100%; 
 
     margin: 0 auto; 
 
     height: 100%; 
 
     border: 3px solid blue; 
 
    } 
 
    /*central middle panel*/ 
 
    .middle { 
 
     margin: 0 auto; 
 
     max-width: 970px; 
 
     height: 100%; 
 
     border: 3px solid yellow; 
 
    } 
 
    /*content panel*/ 
 
    .contentPanel { 
 
     margin: 0 auto; 
 
     padding-top: 0px; 
 
     height: 100%; 
 
     border: 3px solid lightgreen; 
 
    } 
 
    /*Clipboard Box*/ 
 
    .clipboard { 
 
     border-radius: 5px; 
 
     border: 5px solid gray; 
 
     font-size: 100%; 
 
     overflow: auto; 
 
     padding: 5px; 
 
     height: 100% 
 
    } 
 
    /*Example content*/ 
 
    .content { 
 
     height: 100px; 
 
     background: lightgray; 
 
     margin: 5px; 
 
    } 
 
    </style> 
 

 
</head> 
 

 
<body> 
 
    <div class="central"> 
 
    <div class="content"> 
 
     central 
 
    </div> 
 
    <div class="middle"> 
 
     <div class="content"> 
 
     middle 
 
     </div> 
 
     <div class="contentPanel"> 
 
     <div class="content"> 
 
      content 
 
     </div> 
 
     <div class="clipboard"> 
 
      <div style="height:400px; background: lightgray; margin:5px;"> 
 
      clipboard 
 
      </div> 
 
      <div style="height:400px; background: lightgray; margin:5px;"> 
 
      clipboard 
 
      </div> 
 
      <div style="height:400px; background: lightgray; margin:5px;"> 
 
      clipboard 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

来源

2016-04-14 Lenz We

Reeeeally不知道你想做什么。但是，您可能想将'box-sizing：border-box'放在所有解析为''height：100vh'的元素上。这会让他们吃的非边际空间占用100vh，而不是单独的内容。 – abluejelly

简而言之：除剪贴板以外的所有元素都应占用所有垂直空间，不多也不少，而溢出则由剪贴板（它实际发生的唯一位置）管理。 –

听起来像你想'flex-direction：column'和'flex-grow：1'的100vh'' flexbox'，或者将div高度设置为'33.3％'而不是'100％'，然后，将剪贴板放置在它/它们的外面。但是我必须问*为什么*你想这样做？并不是所有的视口都会有足够大的vh来容纳你的所有内容，并且自然滚动按照原因完成。就像，这听起来像一个用户体验的噩梦 - 使我犹豫是否真的帮助。 – abluejelly

我尝试了一些变化，这工作

html, 
body { 
    height: 100vh; 
    padding:0; 
    margin:0; 
    overflow:hidden; 
} 
/*central panel*/ 
.central { 
    position: absolute; 
    width: 100%; 
    margin: 0 auto; 
    height: 100vh; 
    border: 3px solid blue; 
    box-sizing: border-box; 
    overflow:scroll; 
} 
/*central middle panel*/ 
.middle { 
    margin: 0 auto; 
    max-width: 970px; 
    border: 3px solid yellow; 
    box-sizing: border-box; 
} 
/*content panel*/ 
.contentPanel { 
    margin: 0 auto; 
    padding-top: 0px; 
    border: 3px solid lightgreen; 
    box-sizing: border-box; 
} 
/*Clipboard Box*/ 
.clipboard { 
    border-radius: 5px; 
    border: 3px solid gray; 
    box-sizing: border-box;  
    font-size: 100%; 
    overflow: scroll; 
    padding: 5px; 
} 
/*Example content*/ 
.content { 
    background: lightgray; 
    margin: 5px; 
}

告诉我，如果没有按东西没有工作，或者如果我做错了什么:) 编辑：好，所以我进一步研究了一下，你可以

使用柔性盒（我不喜欢毫无理由地）
的JavaScript（这是一个更糟糕的解决方案，但也适用）
CSS钙（）函数（我包括这一个在底部）
- 这将使用CSS插件，可以让u使用的其他元素高度的计算（）函数中更好地工作

html, 
 
body { 
 
    height: 100vh; 
 
    padding: 0; 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 
/*central panel*/ 
 

 
.central { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    height: 100vh; 
 
    border: 3px solid blue; 
 
    box-sizing: border-box; 
 
    overflow: hidden; 
 
} 
 
/*central middle panel*/ 
 

 
.middle { 
 
    margin: 0 auto; 
 
    max-width: 300px; 
 
    border: 3px solid yellow; 
 
    box-sizing: border-box; 
 
    height: calc(100vh - 55px); 
 
    overflow: hidden; 
 
} 
 
/*content panel*/ 
 

 
.contentPanel { 
 
    margin: 0 auto; 
 
    padding-top: 0px; 
 
    border: 3px solid lightgreen; 
 
    box-sizing: border-box; 
 
    height: calc(100vh - 110px); 
 
    overflow: hidden; 
 
} 
 
/*Clipboard Box*/ 
 

 
.clipboard { 
 
    border-radius: 5px; 
 
    border: 3px solid gray; 
 
    box-sizing: border-box; 
 
    overflow: scroll; 
 
    padding: 5px; 
 
    height: calc(100vh - 165px); 
 
} 
 
/*Example content*/ 
 

 
.content { 
 
    background: lightgray; 
 
    margin: 5px; 
 
    height: 40px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Pastebook</title> 
 
</head> 
 

 
<body> 
 
    <div class="central"> 
 
    <div class="content"> 
 
     central 
 
    </div> 
 
    <div class="middle"> 
 
     <div class="content"> 
 
     middle 
 
     </div> 
 
     <div class="contentPanel"> 
 
     <div class="content"> 
 
      content 
 
     </div> 
 
     <div class="clipboard"> 
 
      <div style="height:400px; background: lightgray; margin:5px;"> 
 
      clipboard 
 
      </div> 
 
      <div style="height:400px; background: lightgray; margin:5px;"> 
 
      clipboard 
 
      </div> 
 
      <div style="height:400px; background: lightgray; margin:5px;"> 
 
      clipboard 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

来源

2016-04-14 20:21:23

谢谢！钙是exactely我从来不知道我需要和它的作品很好 –

请标记我的帖子作为解决方案，这将帮助我达到更多需要这些☺️ –

尝试

.central 
{ 
    overflow-y: auto; 
}

来源

2016-04-14 20:26:17

这是完全不是我想要的。 HTML。 body，central，middle和contentPanel应该填充整个垂直空间.clipboard在溢出时仍然可以滚动。 –

css让父母的div 100％身高和儿童可滚动

回答

相关问题