个人中心
gpt4 book ai didi

javascript - 如何将 float div 的高度设置为其邻居的相同高度

转载 作者：行者123 更新时间：2023-11-30 12:56:35 24 4
gpt4 key购买 nike

我正在尝试创建一个带有页眉和页脚的简单 2 列布局。

我有以下 HTML

 <body>
    <div id="header">
       <h1>Title Bar</h1>
     </div>
<div id="content">
    <div id="left">
        left
    </div>
    <div id="right">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum neque id eros auctor tristique. Fusce quam lorem, vestibulum ut magna et, cursus molestie libero. Suspendisse sed mauris vitae diam mattis pellentesque. Nulla neque tortor, varius quis augue vel, commodo tincidunt elit. Maecenas vel odio nec velit faucibus fringilla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum arcu libero, auctor vitae urna eget, blandit fringilla justo. Fusce eu enim id nisi condimentum dictum sit amet non lectus.

Aenean at nulla odio. Vestibulum eleifend massa vitae velit tempor, non auctor velit imperdiet. Nunc ac odio eu justo pretium luctus. Nulla vestibulum urna sed est fermentum aliquam. Etiam eget erat eu tortor dictum rhoncus a nec justo. Sed eu dui ut leo lobortis laoreet quis sed sem. Nulla consectetur augue tristique dignissim viverra. Proin tincidunt tincidunt libero a iaculis. Etiam leo elit, cursus at velit sed, faucibus pretium leo. Ut viverra mattis sodales. Morbi hendrerit quam eu est dignissim congue. Pellentesque quis metus commodo sapien interdum rutrum pellentesque at risus. Sed tempor, orci nec tincidunt dictum, turpis purus mattis enim, ut sodales odio arcu quis sem. Praesent vitae justo lorem. Nam ultrices enim at consectetur vehicula. Ut luctus interdum urna, rutrum luctus orci varius vel.

    Integer pharetra nisi vitae massa condimentum, ac hendrerit magna commodo. Pellentesque sit amet neque ac mauris hendrerit scelerisque quis nec sapien. Nullam tempor odio sed tristique interdum. Donec non aliquet quam. Nunc ac adipiscing tortor. Mauris nec nisl accumsan, ullamcorper metus eu, dictum mi. Mauris id adipiscing lectus. Morbi dignissim scelerisque purus ut ullamcorper. Nu

nc placerat ipsum tortor, quis pretium est sagittis nec. In lacus eros, volutpat eu convallis a, ullamcorper vel leo. Quisque vel orci ultricies, molestie nisi non, congue leo. Nulla orci metus, vehicula at laoreet ut, congue nec sem. Proin tempor justo ut odio vestibulum suscipit in a eros. Sed fermentum et sapien id aliquam. Donec at erat bibendum, fringilla odio sit amet, sagittis nibh.

        Morbi accumsan ullamcorper leo vel viverra. In ac imperdiet libero, id cursus eros. Morbi sed auctor quam, ac ullamcorper metus. Morbi et vestibulum justo, et volutpat libero. Duis pretium magna sapien, at porta justo sodales ve

    l. Sed consequat magna odio, eu mattis risus malesuada vel. Aliquam tristique accumsan fermentum. Morbi interdum nunc vitae viverra pulvinar.

    Donec neque magna, sodales dapibus imperdiet non, suscipit eget ipsum. Etiam nec dolor ut nisi pharetra dictum non eget augue. Etiam tincidunt mi id est euismod, ut venenatis neque tempus. Praesent lacinia risus metus, at condimentum diam vestibulum et. Integer ac mi nec enim facilisis pharetra. Nunc sed nibh libero. Duis imperdiet sapien id euismod viverra. Integer aliquam metus a nulla tincidunt eleifend. Donec a porttitor tortor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam convallis aliquam dolor. Morbi eu velit quam. Nullam sed neque id risus aliquam lobortis. Sed vel pulvinar velit, id varius mauris. Sed justo nunc, laoreet eu velit et, pulvinar eleifend lacus. Phasellus tristique orci vitae dignissim imperdiet.
            </div>
        </div>


    <div id="footer">
        <h5>Footer </h5>
    </div>

</body>

和下面的CSS

    body {
  background-color: red;
  margin: 0px;
}
body h1 {
  margin: 0px;
}
#header {
  background-color: blue;
  color: white;
  height: 80px;
}
#content {
  width: 700px;
}
#left {
  background-color: black;
  color: pink;
  float: left;
  width: 100px;
  height: 100%;
}
#right {
  background-color: lightgreen;
  color: brown;
}
#footer {
  background-color: yellow;
  color: blue;
  clear: both;
  height: 40px;
}

我想确保左侧 Div 的高度与右侧 div 的高度相同，而不管右侧 div 中的内容是什么。

为了做到这一点，我用这个恢复了 java 脚本

 $(document).ready(function () {
        adjustLeftHeight();
    });

    $(window).resize(function () {
        adjustLeftHeight();
    });

    function adjustLeftHeight() {
        $("#left").height($("#content").height());
    }

这不太有效，因为当执行 adjustLeftHeight 时，它将左侧高度设置为内容 div 的高度，但是由于左侧 div 高度的增加占用了额外的空间，因此内容右边的 div 被向下推，增加了右边的 div 的高度，并在 2 个 div 的高度之间留下了一个空隙。

请参阅此 fiddle 以获取有效示例 http://jsfiddle.net/W3P4U/

有没有办法实现 2 列布局，其中两列的高度都是最高列的高度。

最佳答案

查看更新 fiddle .变化:

1: 添加 float: right 到右边的 div 和 width: 300px (内容的宽度 - 左边的宽度)，如果你想让它们固定为宽度；

2: 将 adjustLeftHeight 函数改成这样:

function adjustLeftHeight() {
    var left = $("#left"),
        right = $("#right");

    if (left.height() > right.height())
        right.height(left.height());
    else
        left.height(right.height());
}

关于javascript - 如何将 float div 的高度设置为其邻居的相同高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18884350/

24 4 0
文章推荐： javascript - 保留字错误
文章推荐： javascript - 简单javascript下拉菜单上的html5验证错误
文章推荐： javascript - 确定带有 @font-face 样式的 svg 文本宽度的可靠方法
文章推荐： javascript - 使用 jquery 动态添加表单字段而不发布
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com