静态侧边栏和流体内容与页眉和页脚 [英] Static Sidebar and Fluid content with header and footer

问题描述

您好，我一直有一个问题，编码我的布局，我想让我的侧边栏保持不变，无论屏幕尺寸，但我还需要我的内容区域是流动的。标题保持在顶部，这是我想要的问题是页脚我需要它总是保持在底部和内容区域的全宽。如果任何人都可以帮助，会非常感激。

Hi I have been having a problem with coding my layout I want to have my sidebar stay the same with regardless of screen size, but I also need my content area to be fluid. The header stays at the top which is what I want the problem is the footer I need it to stay always at the bottom and the full width of the content area. If anyone can help it would be muchly appreciated.

这是我的代码。

html, body { 
    height: 100%; 
    margin: 0;
}   

#content { 
    width: 100%; 
    height: 100%;
}   

#left { 
    width: 20%; 
    height: 100%; 
    float: left; 
    background-color: red; 
}   

#right { 
    float: left; 
    width: 80%; 
    height: 100%;  
    background-color: green;
} 

#right header { 
    background: blue;
    text-align: center;
    color: white;
    padding: 20px;
}

#right footer {
    background: brown;
    text-align: center;
    color: white;
    position: absolute;
    bottom: 0;
    width: 80%;
}

<div id='content'>   
    <div id='left'>Testing</div>   
    <div id='right'>
        <header>TITLE</header>
        <div class="content">
            <p>lorem ipsum and the like.</p>
        </div>	
        <footer>FOOTER</footer>
    </div>
</div>

推荐答案

这里是你应该做的：

• 首先，替换 float：left; < #left 和为显示 display：table-cell; c> c $> c $> 选择器。


• 然后，删除<$ c $的 width：80％; c> #right 和 #right footer 选择器


• 添加 right：0 c>


• 最后，设置 left 和您的侧边栏的 width 与固定的和您在那里。

• First, replace the float:left; with display: table-cell; for your #left and #right selectors.
• Then, use display: table; for your #content selector.
• Then, remove the width: 80%; of your #right and #right footer selectors
• Add right : 0; to your #right footer selector
• Finally, set the left of your footer and the width of your sidebar to the same fixed with and you're there.

这种方法的优点是它也适用于不支持 calc（）的IE8和其他浏览器

The beauty of this approach, is that it also works on IE8 and other browsers that do not have support for calc().

html, body { 
    height: 100%; 
    margin: 0;
}   

#content { 
    width: 100%; 
    height: 100%;
    display: table;
}   

#left { 
    width: 100px;
    height: 100%; 
    display: table-cell;
    background-color: red; 
}   

#right { 
    display: table-cell;
    height: 100%;  
    background-color: green;
} 

#right header { 
    background: blue;
    text-align: center;
    color: white;
    padding: 20px;
}

#right footer {
    background: brown;
    text-align: center;
    color: white;
    position: absolute;
    bottom: 0;
    right : 0;
    left : 100px;
}

<div id='content'>   
    <div id='left'>Testing</div>   
    <div id='right'>
        <header>TITLE</header>
        <div class="content">
            <p>lorem ipsum and the like.</p>
        </div>	
        <footer>FOOTER</footer>
    </div>
</div>

a href =https://jsfiddle.net/7azqbymk/ =nofollow> this Fiddle 。

See also this Fiddle.

这篇关于静态侧边栏和流体内容与页眉和页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！