Question

我希望获得一个包含标题，菜单和内容区域的页面。

这是我的代码。

HTML ：

ORA-02290: check constraint (GAS.JHIST_DATE_INTERVAL) violated
ORA-06512: at "GAS.ADD_JOB_HISTORY", line 10
ORA-06512: at "GAS.UPDATE_JOB_HISTORY", line 2
ORA-04088: error during execution of trigger 'GAS.UPDATE_JOB_HISTORY'

CSS

<div class="header">Title</div>
<div class="menu">
    <ul>
        <li>option 1</li>
        <li>second option</li>
    </ul>
</div>
<div class="content">
    <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
    <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
    <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
    <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
    <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
    <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
    <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
</div>

http://jsfiddle.net/x1q03qfk/

正如您在jsfiddle中看到的， .menu 比 .content 更短，但我希望它与 .content

如果我用 display：table-cell 替换 float：left ，它可以正常工作，但我想避免使用该解决方案。

我也尝试过：绝对在 .menu 和顶部：0 ，底部：0 ，但没有运气。

提前致谢！

Answer 1

当DOM加载时，只需将菜单的高度设置为与内容相同：

以下是使用 jQuery ：

的示例

$(".menu").height($(".content").height());

以下是使用 Native JS ：

的示例

var contentHeight = document.getElementsByClassName("content")[0].clientHeight;
document.getElementsByClassName("menu")[0].style.height = contentHeight+"px";

Answer 2

只需使用正确的标记

* {
  box-sizing: border-box
}
body {
  margin: 0
}
.header {
  background-color: yellow;
  padding: 10px;
}
.menu {
  background-color: blue;
  width: 20vw;
  height: 100%;
  position: absolute;
  top: 0;
  right: 100%
}
.content {
  background-color: red;
  float: right;
  width: 80vw;
  position: relative
}

<div class="header">Title</div>

<div class="content">
  <div class="menu">
    <ul>
      <li>option 1</li>
      <li>second option</li>
    </ul>
  </div>
  <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
  <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
  <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
  <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
  <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
  <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
  <h1>ASDUAHSD ASDASD ASID AS DAKSH</h1>
</div>

Answer 3

您是否尝试过（例如）以下内容：

.menu {
background-color: blue;
float: left;
width: 20%;
min-height: 437px;

}

Answer 4

使用 flexbox 可以采用现代方法。

＆＃13;

.header {
    background-color: silver;
    padding: 10px;
}
.main {
    display: flex; /*this is the magic one*/
}
.menu {
    background-color: yellow;
    width: 20%;
}
.content {
    background-color: gold;
    width: 80%;
}

＆＃13;

<div class="header">Title</div>
<div class="main">
    <div class="menu">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    <div class="content">
         <h1>Hello World</h1>
        <p>Ennui literally art party, selfies iPhone exercitation try-hard commodo twee reprehenderit nihil irure Echo Park pour-over kitsch. Beard Intelligentsia locavore mixtape, odio aesthetic hella listicle seitan organic vinyl. Ennui exercitation deserunt tousled four dollar toast, ad pop-up vegan wolf minim whatever dreamcatcher.</p>
        <p>Ennui literally art party, selfies iPhone exercitation try-hard commodo twee reprehenderit nihil irure Echo Park pour-over kitsch. Beard Intelligentsia locavore mixtape, odio aesthetic hella listicle seitan organic vinyl. Ennui exercitation deserunt tousled four dollar toast, ad pop-up vegan wolf minim whatever dreamcatcher.</p>
    </div>
</div>

＆＃13;

如果您希望它适用于所有主流浏览器，我相信table + table-cell是更好的选择。

＆＃13;

.header {
    background-color: silver;
    padding: 10px;
}
.main {
    display: table;
}
.menu, .content {
    display: table-cell;
    vertical-align: top;
}
.menu {
    background-color: yellow;
    width: 20%;
}
.content {
    background-color: gold;
    width: 80%;
}

＆＃13;

<div class="header">Title</div>
<div class="main">
    <div class="menu">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
    <div class="content">
         <h1>Hello World</h1>
        <p>Ennui literally art party, selfies iPhone exercitation try-hard commodo twee reprehenderit nihil irure Echo Park pour-over kitsch. Beard Intelligentsia locavore mixtape, odio aesthetic hella listicle seitan organic vinyl. Ennui exercitation deserunt tousled four dollar toast, ad pop-up vegan wolf minim whatever dreamcatcher.</p>
        <p>Ennui literally art party, selfies iPhone exercitation try-hard commodo twee reprehenderit nihil irure Echo Park pour-over kitsch. Beard Intelligentsia locavore mixtape, odio aesthetic hella listicle seitan organic vinyl. Ennui exercitation deserunt tousled four dollar toast, ad pop-up vegan wolf minim whatever dreamcatcher.</p>
    </div>
</div>

＆＃13;

如何增加div高度以匹配下一个div的高度？

4 个答案: