在一个两列的页面上，如何使用CSS或Javascript将左div扩展到与右div相同的高度？_Javascript_Html_Css

在一个两列的页面上，如何使用CSS或Javascript将左div扩展到与右div相同的高度？

javascript html css

在一个两列的页面上，如何使用CSS或Javascript将左div扩展到与右div相同的高度？,javascript,html,css,Javascript,Html,Css,我正在尝试使用基于div的布局（请不要表格！）创建一个两列页面。问题是，我无法将左div的大小与右div的高度匹配。我右边的div通常有很多内容下面是我的模板的一个配对示例来说明这个问题 <div style="float:left; width: 150px; border: 1px solid;"> <ul> <li>nav1</li> <li>nav2</li> <li>nav

我正在尝试使用基于div的布局（请不要表格！）创建一个两列页面。问题是，我无法将左div的大小与右div的高度匹配。我右边的div通常有很多内容

下面是我的模板的一个配对示例来说明这个问题

<div style="float:left; width: 150px; border: 1px solid;">
  <ul>
    <li>nav1</li>
    <li>nav2</li>
    <li>nav3</li>
    <li>nav4</li>
  </ul>
</div>
<div style="float:left; width: 250px">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna
....
</div>



导航1
导航2
导航3
导航4

Lorem ipsum dolor sit amet，奉献精英，
劳工和大型企业的临时投资
....

最简单的答案在于css（3）的下一个版本，目前浏览器不支持该版本

现在，您只能在javascript中计算高度并将其设置在左侧

如果以这种方式定位导航非常重要，请沿顶部运行导航

您还可以通过将边框移动到容器和更大的内部，使其看起来大小相同，来实现视觉效果

这使它看起来一样，但事实并非如此

<div style="border-left:solid 1px black;border-bottom:solid 1px black;">
  <div style="float:left; width: 150px; border-top: 1px solid;">
    <ul>
     <li>nav1</li>
     <li>nav2</li>
     <li>nav3</li>
     <li>nav4</li>
    </ul>
 </div>
 <div style="float:left; width: 250px; border:solid 1px black;border-bottom:0;">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna
  Lorem ipsum dolor sit amet, consectetur adipisicing elit,
  ...
 </div>
 <div style="clear:both;" ></div>
</div>



导航1
导航2
导航3
导航4

Lorem ipsum dolor sit amet，奉献精英，
劳工和大型企业的临时投资
Lorem ipsum dolor sit amet，奉献精英，
...

@hoyhoy

如果一个设计师可以在html中完成这项工作，那么他就可以拥有这项设计。如果他是一个真正的网页设计大师，他会意识到这是媒体的局限，因为杂志广告中不可能有视频

如果他想通过赋予两列同等重要性来模拟权重，那么可以更改边框，使它们看起来具有相同的权重，并使边框的颜色与列的字体颜色形成对比

但对于使物理元素具有相同的高度，此时只能使用表构造或设置高度。要模拟它们的大小相同，它们不必相同。

在jQuery中可以做到这一点，非常简单，但我不确定JS是否应该用于这些事情。最好的方法是使用纯css

看看，甚至

另外一种技术（在漂亮的IE6上不起作用）是定位：相对于父容器。子容器（您案例中的导航列表）应绝对定位，并强制使用“top:0”占据整个空间；底部：0；'

这是CSS无法做到的最合理、最简单的事情之一。正如Silviu所建议的那样，人造柱是一种很有技巧但很实用的解决方法。如果有一天有一种方式可以说

div.foo { height: $(div.blah.height); } 福娃{ 高度：$（div.blah.height）； }

它可以在CSS中完成！别让别人告诉你别的

最简单、最无痛的方法就是使用这种方法

然而，如果这个解决方案对你不起作用，你就要仔细阅读了。但要注意的是，这是一种CSS，它会让你在半夜里被冷汗惊醒。其要点是在列的底部指定大量的填充，并指定相同大小的负边距。然后将列放置在设置了

溢出：隐藏的的容器中。padding/margin值或多或少地允许框继续扩展，直到到达包装器的末尾（由内容最多的列确定），并且由padding生成的任何额外空间都会作为溢出被截断。这没什么意义，我知道
<div id="wrapper">
  <div id="col1">Content</div>
  <div id="col2">Longer Content</div>
</div>

#wrapper {
  overflow: hidden;
}

#col1, #col2 {
  padding-bottom: 9999px;
  margin-bottom: -9999px;
}


内容
较长内容
#包装纸{
溢出：隐藏；
}
#col1，#col2{
填充底部：9999px；
保证金底部：-9999px；
}

请务必阅读我链接的整篇文章，其中有许多注意事项和其他实现问题。这不是一个很好的技术，但它工作得相当好。
想想看，我从来没有在柱上做过底部边框。它可能只是溢出来了，被切断了。您可能希望底部边框来自作为列内容一部分的单独元素
无论如何，我知道这不是一个完美的灵丹妙药。你可能只需要玩弄它，或者绕过它的缺点。
这可以通过使用背景色的css来实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background: #87ceeb;
    font-size: 1.2em;
}
#container {
    width:100%; /* any width including 100% will work */
    color: inherit;
    margin:0 auto; /* remove if 100% width */
    background:#FFF;
}
#header {
    width: 100%;
    height: 160px;
    background: #1e90ff;
}
#content {/* use for left sidebar, menu etc. */
    background: #99C;
    color: #000;
    float: right;/* float left for right sidebar */
    margin: 0 0 0 -200px; /* adjust margin if borders added */
    width: 100%;
 }
#content .wrapper {
    background: #FFF;
    margin: 0 0 0 200px;
    overflow: hidden;
    padding: 10px; /* optional, feel free to remove */
}
#sidebar {
    background: #99C;
    color: inherit;
    float: left;
    width: 180px;
    padding: 10px;
}
.clearer {
    height: 1px;
    font-size: -1px;
    clear: both;
}

/* content styles */
#header h1 {
    padding: 0 0 0 5px;
}
#menu p {
    font-size: 1em;
    font-weight: bold;
    padding: 5px 0 5px 5px;
}
#footer {
    clear: both;
    border-top: 1px solid #1e90ff; 
    border-bottom: 10px solid #1e90ff;
    text-align: center;
    font-size: 50%;
    font-weight: bold;
}
#footer p {
    padding: 10px 0;
} 
</style>
</head>

<body>


<div id="container">
<!--header and menu content goes here -->

<div id="header">
<h1>Header Goes Here</h1>
</div>
<div id="content">
<div class="wrapper">
<!--main page content goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus. Vivamus ut sem. Fusce aliquam nunc 

vitae purus. Aenean viverra malesuada libero. </p>
</div>
</div>

<div id="sidebar">
<!--sidebar content, menu goes here -->
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ligula lorem, consequat eget, tristique nec, auctor quis, purus.</p>
</div>

<div class="clearer"></div><!--clears footer from content-->
<!--footer content goes here -->
<div id="footer">
<p>Footer Info Here</p>
</div>
</div>
</body>
</html>


无标题文件
* {
保证金：0；
填充：0；
}
身体{
字体系列：Arial、Helvetica、无衬线字体；
背景#87ceeb；
字体大小：1.2米；
}
#容器{
宽度：100%；/*包括100%在内的任何宽度都适用*/
颜色：继承；
边距：0自动；/*如果100%宽度，则删除*/
背景：#FFF；
}
#标题{
宽度：100%；
高度：160px；
背景：#1e90ff；
}
#内容{/*用于左侧边栏、菜单等*/
背景：#99C；
颜色：#000；
浮动：右侧；/*左侧浮动用于右侧边栏*/
边距：0-200px；/*如果添加边框，则调整边距*/
宽度：100%；
}
#内容包装器{
背景：#FFF；
利润率：0.200px；
溢出：隐藏；
填充：10px；/*可选，可随意移除*/
}
#边栏{
背景：#99C；
颜色：继承；
浮动：左；
宽度：180px；
填充：10px；
}
.更清楚{
高度：1px；
字号：-1px；
明确：两者皆有；
}
/*内容样式*/
#收割台h1{
填充：0 5px；
}
#菜单p{
字号：1em；
字体大小：粗体；
填充：5px 0 5px 5px；
}
#页脚{
明确：两者皆有；
边框顶部：1px实心#1e90ff；
边框底部：10px实心#1e90ff；
文本对齐：居中；
字体大小：50%；
字体大小：粗体；
}
#页脚p{
填充：10px0；
} 
标题在这里
Lorem ipsum dolor sit amet，是一位杰出的领导者。杜伊斯·利古拉·洛雷姆、康塞卡特·埃吉特、特里斯蒂克·内克、拍卖人奎斯、普卢斯。维瓦姆斯大学。阿利夸姆努克酒店
purus生命。埃尼安·维韦拉·马莱苏阿达·利伯罗
Lorem ipsum dolor sit amet，Concertetuer Adipisin
<script type="text/javascript">
// plugin
jQuery.fn.equalHeights=function() {
    var maxHeight=0;

    this.each(function(){
        if (this.offsetHeight>maxHeight) {maxHeight=this.offsetHeight;}
    });

    this.each(function(){
        $(this).height(maxHeight + "px");
        if (this.offsetHeight>maxHeight) {
            $(this).height((maxHeight-(this.offsetHeight-maxHeight))+"px");
        }
    });
};

// usage
$(function() {
    $('.column1, .column2, .column3').equalHeights();
});
</script>

var c = $("#center");
var cp = parseInt(c.css("padding-top"), 10) + parseInt(c.css("padding-bottom"), 10) + parseInt(c.css("borderTopWidth"), 10) + parseInt(c.css("borderBottomWidth"), 10);
var r = $("#right");
var rp = parseInt(r.css("padding-top"), 10) + parseInt(r.css("padding-bottom"), 10) + parseInt(r.css("borderTopWidth"), 10) + parseInt(r.css("borderBottomWidth"), 10);

if (c.outerHeight() < r.outerHeight()) {
    c.height(r.height () + rp - cp);
} else {
    r.height(c.height () + cp - rp);
}

function setHeight(){
  var height = $(document).height(); //optionally, subtract some from the height
  $("#leftDiv").css("height", height + "px");
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
    $(document).ready(function () {
        var height = $(document).height(); //optionally, subtract some from the height
        $("#menu").css("height", (height) + "px");
        $("#content").css("height", (height) + "px");
    });
</script>
<style type="text/css">
    <!--

    html, body {
        font-family: Arial;
        font-size: 12px;
    }


    #header {
        background-color: #F9C;
        height: 200px;
        width: 100%;
        float: left;
        position: relative;
    }

    #menu {
        background-color: #6CF;
        float: left;
        min-height: 100%;
        height: auto;
        width: 10%;
        position: relative;
    }

    #content {
        background-color: #6f6;
        float: right;
        height: auto;
        width: 90%;
        position: relative;
    }

    #footer {
        background-color: #996;
        float: left;
        height: 100px;
        width: 100%;
        position: relative;
    }
    -->
</style>
</head>


<body>
<div id="header">
    i am a header
</div>
<div id="menu">
    i am a menu
</div>
<div id="content">
    I am an example of how to do layout with css rules and divs.
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>
    <p> I am an example of how to do layout with css rules and divs. </p>

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


</body>
</html>