Set div's height to occupy the contents layout

I want to achieve the following:

"Main" div and sidebar "div" should have same height, with minimum height (maybe browser's screen height or 700px) maximum height is not limited - according to the contents.
The "content" div should wrap them(same height and width of both of them)

Markup:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>

    <link href="StyleSheet2.css" rel="stylesheet" type="text/css" />

</head>
<body>
    <div id="wrap">

      <div id="content">                
        <div id="main">
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>          
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>         
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>                      
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>    
        </div>      
        <div id="sidebar"></div>
      </div>
      <div id="footer">
          <p>Footer</p>
      </div>

    </div>
</body>
</html>

CSS:

body, html
{
    margin: 0;
    padding: 5px;
    color: #000;
    background: #ace187;
    height:100%; 
}
#wrap
{
    width: 752px;
    height:100%; 
    margin: 0 auto; 
}

#content
{
    border: 1px solid #000000;
    height: 100%;
    background-color: #dbeef8;
}
#main
{
    float: left;
    width: 506px;
    padding: 10px;   
    border: thin dashed green;
   height: 100%;
}

#sidebar
{
    border: thin dashed #FF0000;
    float: right;
    width: 200px;
    padding: 10px;
    height: 100%;
}
#footer
{
    clear: both;
    padding: 5px 10px;
    background: #cc9;
}

note: there is a "wrap" div and it's also needed because it wraps a header that i omitted.

标签： html css layout

5条回答

戒情不戒烟

2楼-- · 2019-04-15 06:35

Though I am not fond of CSS expressions

height:expression("selector".Height< min-height? min-height : "auto" );

0人赞添加讨论(0) 举报

男人必须洒脱

3楼-- · 2019-04-15 06:35

The following is the answer I got from the author of the "stupid tables" page http://hotdesign.com/seybold/everything.html whom you cited in your comments. I figured that if he was going to go to the effort of giving this advice to people, I might as well ask him for a hint on how to solve this particular problem.

Hi Carl,

You could float all three, the wrap, the content, and the sidebar. That would contain everything. If you put a background image on the wrap, it would appear that the sidebar were the same height as the main content.

Or you could use overflow:auto on the wrap. That would also contain the floats.

However, I do not advocate uncompromising adherence to CSS layouts. 99% of the time, they are the way to go. But the other 1% of the time, tables are the only practical answer.

Table cells are the only elements in HTML that resize according to the content and dimensions of adjacent elements.

I'm glad you think the site was pretty. I hope you found other things of value there.

Cheers,

Bill

I'm happy to see he agrees with me that it's not practical to ALWAYS steer clear of tables.

0人赞添加讨论(0) 举报

欢心

4楼-- · 2019-04-15 06:44

Equal height columns with pure CSS. I added a min-height since you asked for it. There is the one IE6 hack purely for the min-height since IE6 doesn't understand min-height, but treats height as min-height. This is a striped down version of this.. http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

#container2 {
clear:left;
float:left;
width:100%;
overflow:hidden;
background:#ffa7a7;}
#container1 {
float:left;
width:100%;
position:relative;
right:50%;
background:#fff689; /* column 1 background colour */
}
#col1 {
float:left;
width:46%;
position:relative;
left:52%;
overflow:hidden;
_height:700px;
min-height:700px;
}
#col2 {
float:left;
width:46%;
position:relative;
left:56%;
overflow:hidden;
_height:700px;
min-height:700px;
}


<div id="container2">
<div id="container1">
    <div id="col1">
        <p>some text</p>
    </div>
    <div id="col2">
        <p>some text</p>
    </div>
</div>

0人赞添加讨论(0) 举报

做个烂人

5楼-- · 2019-04-15 06:48

To answer your second question:

#content
{
    border: 1px solid #000000;
    height: 100%;
    background-color: #dbeef8;
    /* new part */
    overflow: hidden;
}

Your first question is a bit harder. In my order of preference (depending on circumstances):

You can fake it using backgrounds for #main, #sitebar and #content.
You can use javascript to get the tallest column and apply that height to the other one as well.
You can use display:table and display:table-cell if IE6 and IE7 (older browsers in general actually...) are not a requirement.

Cross-browswer pure css is not possible I´m afraid.

0人赞添加讨论(0) 举报

在下西门庆

6楼-- · 2019-04-15 06:55

I keep reading about sleazy CSS hacks to achieve this, or fake it.

At the risk of drawing the ire of the CSS purist crowd, whenever this comes up for me, I use tables. "Semantics and presentation" be damned, so long as CSS doesn't offer sensible solutions for commonplace problems like this, I'll stick with what works.

If you could guarantee that your page will always be shown in a JavaScript-enabled browser, you could do the sizing dynamically. But this would be far from my first choice.

0人赞添加讨论(0) 举报

Set div's height to occupy the contents layout

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间