jQuery中div的高度為100％

Question

我想放置一個高度為100％的<div id="design"> （在圖片上為紅色）。 但是我沒有設法。 這在CSS中是可能的，或者在jQuery中更好？

你能幫我嗎 ？

https://jsfiddle.net/Xroad/qq5vfmxg/9/

#design {
    width: 100%;
    height: 100%; /* Don't work */
    margin-top: 40px;
    background: red;
    border: 2px solid black;
}

Answer 1

height: 100%; 在父元素上設置高度時有效。 由於您尚未共享標記，因此我無法確切指出#design的父#design 。 使用所需的任何單位在#design的父元素上設置高度，或者在#design上使用百分比值以外的單位。

工作示例：

.outer {
    height: 250px;
}
.inner {
    height: 50%;
}

<div class="outer">
    <div class="inner">I will be 125px tall.</div>
</div>

非工作示例：

.outer {
    height: 250px;
}
.inner {
    height: 50%;
}

<div class="outer">
    <div class="middle">
        <div class="inner">I will only be as tall as the space this text takes up.</div>
    </div>
</div>

Answer 2

您需要添加溢出：自動； 在#design和溢出中：隱藏； 在“旁聽”課上。

aside, main {
    padding: 40px 0;
    background-color: #7d7d7d;
    border: 2px solid black;
    overflow : hidden;
}

#design {
    width: 100%;
    height: 100%;
    margin-top: 40px;
    background: red;
    border: 2px solid black;
    overflow : auto;
}

http://jsfiddle.net/aftwjus7/

Answer 3

實際上，使用CSS將列中的元素設置為與其他列具有相同的高度是非常痛苦的。 您可以使用表格，但這大約是90年代。

如果可以依靠您的用戶將使用現代瀏覽器（ IE10 + ），我建議您使用CSS3 Flexbox-您將輕松實現所需的功能。 有關可能的選項的教程和說明，請參見https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 。

看到這個改變的小提琴（使用Firefox或Chrome，我沒有使用所有必需的供應商前綴）： https : //jsfiddle.net/1htd7pbt/1/

基本上，我只是添加了以下內容：

#content .row {
    display: flex;
    align-items: stretch;
}

#content aside {
    width: auto;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

#design {
    flex-grow: 1;
}

Answer 4

在這里進行一些調整。 我從標題中刪除了行類，並將填充分別放在表單和設計中。 但這有效。 這是小提琴的結果 （只需刪除嵌入內容/結果即可看到小提琴）

 html, body { height: 100%; } .mw1140p { max-width: 1140px; margin: 0 auto; } .row { clear: both; } .row { display: table; table-layout: fixed; width: 100%; height: 100%; } .row > *, .col { display: table-cell; vertical-align: top; } aside .w25 { width: 25%; height: 100%; } .w75 { width: 75%; height: 98%; overflow-y: hidden; } header { height: 70px; background-color: #7d7d7d; border: 2px solid black; } #logo { height: 40px; } main { padding: 40px 0; background-color: #7d7d7d; border: 2px solid black; } label { color: white; } input { width: 98%; margin: 10px 0; } aside form { width: 100%; height: 18%; background-color: #7d7d7d; border: 2px solid black; padding: 40px 0; overflow: hidden; } #design { width: 100%; height: 82%; padding-top: 20px; background: red; border: 2px solid black; overflow: hidden; } h3, p { color: white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <header class="mw1140p"> <img id="logo" src="http://www.vectortemplates.com/raster/batman-logo-big.gif"> </header> <section id="content"> <div class="mw1140p row"> <aside class="col w25"> <form action="" method="post"> <label for="keyword">Type your keywords</label> <input type="text" name="keyword"> <button class="green">Ajouter</button> </form> <div id="design"> <p>Put 100% please !</p> </div> </aside> <main class="col w75"> <ul id="content-list"> <li class="list-item row"> <h3>Title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida at dolor sed semper. Aenean justo magna, ultrices non odio sit amet, feugiat commodo elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla congue libero id arcu bibendum, sed faucibus velit laoreet. Sed nec nunc at nibh ultricies sagittis. Suspendisse lorem massa, finibus et lacinia sit amet, blandit vel est. Ut non suscipit risus, sit amet dignissim erat. Aliquam eget posuere nibh.</p> </li> <li class="list-item row"> <h3>Title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida at dolor sed semper. Aenean justo magna, ultrices non odio sit amet, feugiat commodo elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla congue libero id arcu bibendum, sed faucibus velit laoreet. Sed nec nunc at nibh ultricies sagittis. Suspendisse lorem massa, finibus et lacinia sit amet, blandit vel est. Ut non suscipit risus, sit amet dignissim erat. Aliquam eget posuere nibh.</p> </li> <li class="list-item row"> <h3>Title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida at dolor sed semper. Aenean justo magna, ultrices non odio sit amet, feugiat commodo elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla congue libero id arcu bibendum, sed faucibus velit laoreet. Sed nec nunc at nibh ultricies sagittis. Suspendisse lorem massa, finibus et lacinia sit amet, blandit vel est. Ut non suscipit risus, sit amet dignissim erat. Aliquam eget posuere nibh.</p> </li> <li class="list-item row"> <h3>Title</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce gravida at dolor sed semper. Aenean justo magna, ultrices non odio sit amet, feugiat commodo elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla congue libero id arcu bibendum, sed faucibus velit laoreet. Sed nec nunc at nibh ultricies sagittis. Suspendisse lorem massa, finibus et lacinia sit amet, blandit vel est. Ut non suscipit risus, sit amet dignissim erat. Aliquam eget posuere nibh.</p> </li> </ul> </main> </div> </section> 

Answer 5

您應該將CSS用於這些目的。 jQuery很難。 僅使用vh而不是％。

#design {
  width: 100%;
  height: 100vh;
  margin-top: 40px;
  background: red;
  border: 2px solid black;
}

您可以在此鏈接中找到有關vh的更多說明。