Question

我想在图片中放置<div id="design">（红色，高度为100％）。但我没有成功。这在CSS中是可行的，还是在jQuery中更好？

你能帮我吗？

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

Answer 1

在父元素上设置高度时，

height: 100%;有效。由于您尚未共享标记，因此无法确切指出哪个元素可能是#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

你需要添加overflow：auto;在#design和overflow：hidden;在“旁白”课程中。

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将列中的元素设置为与其他列具有相同的高度非常痛苦。你可以使用表格，但那是非常好的表格。

如果您依赖于您的用户将使用现代浏览器（IE10+），我建议您使用CSS3 Flexbox - 您将非常轻松地实现您的需求。有关可能选项的教程和说明，请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

看到这个改变的小提琴（使用Firefox或Chrome，我没有使用所有必要的供应商前缀）：https://jsfiddle.net/1htd7pbt/1/

基本上，我刚刚添加了这个：

curl

Answer 4

这里稍微调整一下。我从标题中删除了行类，并将填充放在表单中并单独设计。但它的确有效。这是小提琴result（刚刚删除嵌入/结果以查看小提琴）

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 5

您应该将CSS用于这些目的。 Jquery很难。只使用vh代替％。

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

您可以在this link中找到有关vh的更多说明。

jQuery中div的100％高度

5 个答案: