我怎样才能对这个结构进行风格化并添加滚动条？答案

【问题标题】：How can i stylize this structure and add a scrollbar?我怎样才能对这个结构进行风格化并添加滚动条？
【发布时间】：2015-02-02 22:18:36
【问题描述】：

您好，我想用 CSS 对这个结构 HTML 进行样式化，需要创建 3 行。 1.header 2.maincontent 3.footer ！我需要为所有主页添加一个滚动条，每行只有1个滚动条而不是1个...... 就像代码结构一样，我想要页眉、主内容和页脚的样式。等待帮助。

<div id="header">
    <div id="headerLeft">
        <div class="msgs">Mesazh</div>
        <div class="points">Points</div>
    </div>
    <div id="headerRight">
        <div class="hungry">Hungry: </div>Action:

</div>
<div id="maincontent">
     <div class="output">LALALALALALALA</div>
</div>
<div id="footer">
    <div id="footerleft">
        <div class="onlinePlayer">Klevi</div>
    </div>
    <div id="footerCenter">
        <div class="map">harta</div>
        <div class="forum">forumi</div>
        <div class="logout">logout</div>
    </div>
    <div id="footerRight">
         <div class="details">details</div>
         <div class="inventory">inventory</div>
         <div class="support">support</div>
    </div>
</div>
</div>

【问题讨论】：

标签： html css coding-style scrollbar

【解决方案1】：

你今天已经问过滚动条 2 次了。

创建布局的基本方法是使用浮动来显示彼此相邻的 div。您将这些 div 放入容器中。您可以使列按百分比流动或固定。

标题的 HTML 看起来像

<div class="row">
    <div class="two cols">a</div>
    <div class="one cols">s</div>
</div>

第一个 css 用于 div 的行或容器。

.row {
width: 100%;
max-width: 960px;
margin: 0 auto;
background: #fff;
}

第二个 css 是每种列的基本代码。

.col, .cols {
margin-left: 4.40%;
float: left;
min-height: 1px;
position: relative;
}

下面控制不同列的宽度

.col:first-child, .cols:first-child {
    margin-left: 0px;
}
.row .one.cols {
    width: 30.4%;
}
.row .two.cols {
    width: 65.2%;
}
.row .three.cols {
    width: 99.99999999999999%;
}

下面的例子是基于ZURB的基础

http://jsfiddle.net/vmbm55fo/

【讨论】：