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％身高和兒童可滾動

回答

相關問題