发表新帖
发表新帖

On a two-column page, how can I grow the left div to the same height of the right div using CSS or Javascript?

后端 未结
关注
11 2724
野趣味
野趣味 2020-12-15 07:17

I\'m trying to make a two-column page using a div-based layout (no tables please!). Problem is, I can\'t grow the left div to match the height of the right one. My right di

相关标签:
11条回答
  • 故里飘歌
    2020-12-15 07:37

    There is also a Javascript based solution. If you have jQuery, you can use the below plugin.

    <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>
    0 讨论(0)
  • 清歌不尽
    2020-12-15 07:43

    Use jQuery for this problem; just call this function in your ready function:

    function setHeight(){
  var height = $(document).height(); //optionally, subtract some from the height
  $("#leftDiv").css("height", height + "px");
}
    0 讨论(0)
  • 渐次进展
    2020-12-15 07:46

    To grow the left menu div with same height as the right content div.

    <!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>
    0 讨论(0)
  • 悲哀的现实
    2020-12-15 07:47

    It can be done in CSS! Don't let people tell you otherwise.

    The easiest, most pain-free way to do it is to use the Faux Columns method.

    However, if that solution doesn't work for you, you'll want to read up on this technique. But be warned, this is the kind of CSS hackery that will make you wake up in a cold sweat in the middle of the night.

    The gist of it is that you assign a large amount of padding to the bottom of the column, and a negative margin of the same size. Then you place your columns in a container that has overflow: hidden set. More or less the padding/margin values allow the box to keep expanding until it reaches the end of the wrapper (which is determined by the column with the most content), and any extra space generated by the padding is cut off as overflow. It doesn't make much sense, I know...

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

    Be sure to read the entire article I linked to, there are a number of caveats and other implementation issues. It's not a pretty technique, but it works fairly well.

    0 讨论(0)
  • 情深已故
    2020-12-15 07:52

    This is one of those perfectly reasonable, simple things that CSS can't do. Faux Columns, as suggested by Silviu, is a hacky but functional workaround. It would be lovely if someday there was a way to say

    div.foo {
height: $(div.blah.height);
}
    0 讨论(0)
 看不清?
提交回复
热议问题