如何获得这2列布局（一个适合内容） [英] How to get this 2 columns layout (were one fits to content)

问题描述

请注意

• 需要时显示垂直滚动条




//i.stack.imgur.com/pkwcD.pngalt =layout>




谢谢！





HTML看起来像：


$

b $ b

 < div id =pageWrapper> 
< header>标题< / header> 
< div id =contentWrapper> 
< div class =table-wrap> 
< div class =cell col1> 
< div class =content>第1列：缩放到适合宽度< / div> 
< / div> 
< div class =cell col2> 
< div class =content>栏2：可变宽度< / div> 
< / div> 
< / div> 
< / div> 
< div id =footerWrapper> Footer< / div> 
< / div> 
  

和CSS：

  html，body {
 height：100％; 
 margin：0; 
} 
 body {
 background-color：＃E3E3E3; 
} 
 #pageWrapper {
 margin：0 auto; 
 position：relative; 
 width：90％; / *设置为100％或更小或固定宽度... * / 
 height：100％; 
} 
 header {
 display：block; 
 width：100％; 
 height：100px; 
 background：yellow; 
} 
 #contentWrapper {
 width：100％; 
 position：absolute; 
 top：100px; 
 bottom：100px; 
 left：0; 
 background：beige; 
} 
 #footerWrapper {
 width：100％; 
 position：absolute; 
 height：100px; 
 bottom：0px; 
 left：0; 
 background：gray; 
} 
 .table-wrap {
 width：100％; 
 height：100％; 
} 
 .table-wrap .cell {
 height：100％; 
} 
 .table-wrap .col1 {
 float：left; 
 border：1px dotted blue; 
 max-width：80％; / *这很重要，否则列2可以消失* / 
} 
 .table-wrap .col1 .content {
 height：inherit; 
 display：inline-block; 
 overflow-y：auto; 
} 
 .table-wrap .col2 {
 
} 
 .table-wrap .col2 .content {
 height：inherit; 
 overflow-y：auto; 
} 
  

查看演示： http://jsfiddle.net/audetwebdesign/kbAwf/





工作原理





使用绝对定位将页眉，主内容区域和页脚放置在视图端口区域内。





#contentWrapper ）， .table-wrap 容器有两个单元格，一个浮动左边（列1）。





要获得列1的缩小到适合的宽度，请设置 display：inline -block 到内部 .content 容器。





最后，使用 overflow-y：auto 滚动条。 （您也可以使用滚动值。）





您需要将最大宽度设置为 .col1 .col2 不会被推出视图端口。我将它设置为80％，但你可以调整它。





另外，请注意，inline-block将尽可能扩展其内容，这就是为什么你需要约束它。





你想在 #pageWrapper 上设置最小宽度，以防止布局收缩到小于有用的东西。




Please note

• the vertical scrollbars shoud show up when needed
• left columns fits to width
• right column takes the rest of the space

Thanks!

解决方案

Here is one approach that uses CSS only.

The HTML looks like:

<div id="pageWrapper">
    <header>Header</header>
    <div id="contentWrapper">
        <div class="table-wrap">
            <div class="cell col1">
                <div class="content">Column 1: Shrink-to-Fit Width</div>
            </div>
            <div class="cell col2">
                <div class="content">Column 2: Variable Width</div>
            </div>
        </div>
    </div>
    <div id="footerWrapper">Footer</div>
</div>

and the CSS:

html, body {
    height: 100%;
    margin: 0;
}
body {
    background-color: #E3E3E3;
}
#pageWrapper {
    margin: 0 auto;
    position: relative;
    width: 90%; /*set to 100% or smaller or fixed width... */
    height: 100%;
}
header {
    display:block;
    width: 100%;
    height: 100px;
    background: yellow;
}
#contentWrapper {
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 100px;
    left: 0;
    background: beige;
}
#footerWrapper {
    width: 100%;
    position: absolute;
    height: 100px;
    bottom: 0px;
    left: 0;
    background: gray;
}
.table-wrap {
    width: 100%;
    height: 100%;
}
.table-wrap .cell {
    height: 100%;
}
.table-wrap .col1 {
    float: left;
    border: 1px dotted blue;
    max-width: 80%; /* This is critical or else Column 2 can disappear */
}
.table-wrap .col1 .content {
    height: inherit;
    display: inline-block;
    overflow-y: auto;
}
.table-wrap .col2 {

}
.table-wrap .col2 .content {
    height: inherit;
    overflow-y: auto;
}

See demo at: http://jsfiddle.net/audetwebdesign/kbAwf/

How This Works

Use absolute positioning to place the header, main content area and footer within the view port area.

Within the content area (#contentWrapper), the .table-wrap container has two cells, one which is floated left (column 1). This allows column 2 to fill the rest of the width.

To get the shrink-to-fit width for column 1, set display: inline-block to the inner .content container.

Finally, use overflow-y: auto for the scroll bars. (You can also use the scroll value.)

You need to set a maximum width to .col1 so that .col2 does not get pushed out of the view port. I set it to 80% but you can adjust it.

Also, note that an inline-block will expand as much as possible to flow its content, which is why you need to constrain it.

You man want to set a minimum width on #pageWrapper to prevent the layout from shrinking to something that is less than useful.

这篇关于如何获得这2列布局（一个适合内容）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！