发表新帖
发表新帖

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 2723
野趣味
野趣味 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:27

    I use this to align 2 columns with ID "center" and "right":

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

    Hope it helps.

    0 讨论(0)
  • 予麋鹿
    2020-12-15 07:28

    @hoyhoy

    If a designer can make this work in html, then he can have this design. If he is a true master of web design, he will realize that this is a limitation of the media, as video is not possible in magazine ads.

    If he would like to simulate weight by giving the 2 columns equal importance, than change the borders, so that they appear to be of the same weight, and make the colors of the borders contrast to the font color of the columns.

    But as for making the physical elements the same height, you can only do that with a table construct, or setting the heights, at this point in time. To simulate them appearing the same size, they don't have to be the same size.

    0 讨论(0)
  • 悲&欢浪女
    2020-12-15 07:29

    You can do it in jQuery really simple, but I am not sure JS should be used for such things. The best way is to do it with pure css.

    1. Take a look at faux columns or even Fluid Faux Columns

    2. Also another technique(doesn't work on the beautiful IE6) is to position:relative the parent container. The child container(the nav list in your case) should be positioned absolute and forced to occupy the whole space with 'top:0; bottom:0;'

    0 讨论(0)
  • 温柔的废话
    2020-12-15 07:35

    This can be done with css using background colors

    <!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)
  • 执笔经年
    2020-12-15 07:37

    Your simplest answer lies in the next version of css (3), which currently no browser supports.

    For now you are relegated to calculating heights in javascript and setting them on the left side.

    If the navigation is so important to be positioned in such a way, run it along the top.

    you could also do a visual trick by moving the borders to the container and the bigger inner, and make it appear to be the same size.

    this makes it look the same, but it isn't.

    <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>
    0 讨论(0)
  • 春和景丽
    2020-12-15 07:37

    Come to think of it, I've never done it with a bottom border on the column. It's probably just overflowing, and getting cut off. You might want to have the bottom border come from a separate element that's part of the column content.

    Anyway, I know it's not a perfect magic bullet solution. You might just have to play with it, or hack around its shortcomings.

    0 讨论(0)
 看不清?
提交回复
热议问题