Fatal编程技术网
  • html/
  • Html 如何增加div高度以匹配下一个div的高度？

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

html css

Html 如何增加div高度以匹配下一个div的高度？,html,css,Html,Css,我想得到一个标题，菜单和内容区的网页 这是我的密码 HTML： <div class="header">Title</div> <div class="menu"> <ul> <li>option 1</li> <li>second option</li> </ul> </div> <div class="content"&

我想得到一个标题，菜单和内容区的网页

这是我的密码

HTML：

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

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

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

正如您在JSFIDLE中看到的，.menu比.content短，但我希望它的高度与.content相同

如果我用显示：表格单元格替换浮动：左，它会工作，但我想避免这种解决方案

我还尝试了菜单上的position:absolute和顶部：0，底部：0，但没有运气

提前谢谢

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

下面是一个使用jQuery的示例：

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

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

var contentHeight = document.getElementsByClassName("content")[0].clientHeight;
document.getElementsByClassName("menu")[0].style.height = contentHeight+"px";
下面是一个使用原生JS的示例：

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

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

var contentHeight = document.getElementsByClassName("content")[0].clientHeight;
document.getElementsByClassName("menu")[0].style.height = contentHeight+"px";
加载DOM时，只需将菜单的高度设置为与内容相同：

下面是一个使用jQuery的示例：

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

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

var contentHeight = document.getElementsByClassName("content")[0].clientHeight;
document.getElementsByClassName("menu")[0].style.height = contentHeight+"px";
下面是一个使用原生JS的示例：

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

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

var contentHeight = document.getElementsByClassName("content")[0].clientHeight;
document.getElementsByClassName("menu")[0].style.height = contentHeight+"px";
您是否尝试过（例如）类似于：

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

您是否尝试过（例如）类似于：

.menu {
background-color: blue;
float: left;
width: 20%;
min-height: 437px;
}使用有一种现代化的方法

.header{
背景颜色：银色；
填充：10px；
}
梅因先生{
display:flex；/*这是神奇的一个*/
}
.菜单{
背景颜色：黄色；
宽度：20%；
}
.内容{
背景颜色：金色；
宽度：80%；
}
标题

    

  • 项目1
    • 

  • 项目2
    • 

  • 项目3
    • 


你好，世界
无聊的艺术派对，自拍的iPhone练习，努力的commodo twee reprehenderit nihil irure Echo Park充斥着庸俗。Beard Intelligentisia locavore混音带，odio美学hella listicle seitan有机乙烯基。厌倦的练习应该是四美元一块的土司，弹出的纯素狼迷你版《追梦者》

无聊的艺术派对，自拍的iPhone练习，努力的commodo twee reprehenderit nihil irure Echo Park充斥着庸俗。Beard Intelligentisia locavore混音带，odio美学hella listicle seitan有机乙烯基。厌倦的练习应该是四美元一块的土司，弹出的纯素狼迷你版《追梦者》


使用有一种现代化的方法



.header{
背景颜色：银色；
填充：10px；
}
梅因先生{
display:flex；/*这是神奇的一个*/
}
.菜单{
背景颜色：黄色；
宽度：20%；
}
.内容{
背景颜色：金色；
宽度：80%；
}


标题

    

  • 项目1
    • 

  • 项目2
    • 

  • 项目3
    • 


你好，世界
无聊的艺术派对，自拍的iPhone练习，努力的commodo twee reprehenderit nihil irure Echo Park充斥着庸俗。Beard Intelligentisia locavore混音带，odio美学hella listicle seitan有机乙烯基。厌倦的练习应该是四美元一块的土司，弹出的纯素狼迷你版《追梦者》

无聊的艺术派对，自拍的iPhone练习，努力的commodo twee reprehenderit nihil irure Echo Park充斥着庸俗。Beard Intelligentisia locavore混音带，odio美学hella listicle seitan有机乙烯基。厌倦的练习应该是四美元一块的土司，弹出的纯素狼迷你版《追梦者》


只需使用正确的标记即可



*{
框大小：边框框
}
身体{
保证金：0
}
.标题{
背景颜色：黄色；
填充：10px；
}
.菜单{
背景颜色：蓝色；
宽度：20vw；
身高：100%；
位置：绝对位置；
排名：0；
右：100%
}
.内容{
背景色：红色；
浮动：对；
宽度：80vw；
职位：相对
}


标题

    

  • 选择1
    • 

  • 第二种选择
    • 


ASDUAHSD ASDASD ASID AS DAKSH
ASDUAHSD ASDASD ASID AS DAKSH
ASDUAHSD ASDASD ASID AS DAKSH
ASDUAHSD ASDASD ASID AS DAKSH
ASDUAHSD ASDASD ASID AS DAKSH
ASDUAHSD ASDASD ASID AS DAKSH
ASDUAHSD ASDASD ASID AS DAKSH

只需使用正确的标记即可



*{
框大小：边框框
}
身体{
保证金：0
}
.标题{
背景颜色：黄色；
填充：10px；
}
.菜单{
背景颜色：蓝色；
宽度：20vw；
身高：100%；
位置：绝对位置；
排名：0；
右：100%
}
.内容{
背景色：红色；
浮动：对；
宽度：80vw；
职位：相对
}


标题

    

  • 选择1
    • 

  • 第二种选择
    • 


ASDUAHSD ASDASD ASID AS DAKSH
ASDUAHSD ASDASD ASID AS DAKSH
ASDUAHSD ASDASD ASID AS DAKSH
ASDUAHSD ASDASD ASID AS DAKSH
ASDUAHSD ASDASD ASID AS DAKSH
ASDUAHSD ASDASD ASID AS DAKSH
ASDUAHSD ASDASD ASID AS DAKSH

您是否尝试过使用最小高度强制菜单达到与内容分区高度相匹配的最小高度？您是否尝试过使用最小高度强制菜单达到与内容分区高度相匹配的最小高度？（当然，这使用的是固定高度，这可能不是您想要的）（当然，这使用了一个固定的高度，这可能不是您想要的）谢谢Spencer，我已经尝试过类似的东西了，但是如果.content增加了它的高度，.menu会保留旧的height@Boel当元素的高度也发生变化时，你只需要这样做。我假设你的内容总是比菜单高，否则它就不会像预期的那样工作，demo-@sdcr是的，我确实假设了，尽管这是一个结束流量问题。一个简单的解决方法是添加一些。谢谢Spencer，我已经尝试过类似的方法，但是如果.content增加了它的高度，.menu会保留旧的height@Boel当元素的高度也发生变化时，您只需执行此操作。我假设您的内容始终高于菜单，否则它将无法按预期工作，demo-@sdcr是我是这么想的，alt