【问题标题】:How to create fixed height 1st column layout?如何创建固定高度的第一列布局?
【发布时间】:2012-11-09 16:02:23
【问题描述】:

如何创建固定高度的第一列布局? 我看到了一个 kevinrose.com 博客,我喜欢它,简单而干净的布局,我想使用该布局,所以我试图创建它,但我坚持这个固定高度,我可以轻松设置固定栏,如标题,但列,我不知道该怎么做 示例:

#sidebar
{
    background-color: red;
    height: 700px;
    width: 100px;
    float: left;
}
#article
{
    background-color: blue;
    height: 400px;
    width: 200px;
    float: left;            
}
#like
{
    background-color: green;
    height: 100px;
    width: 200px;
    position: fixed;
    float: left;   

    z-index:-5;
}

【问题讨论】:

    标签: html css layout height fixed


    【解决方案1】:

    使用位置:固定在侧边栏上,其余使用边距偏移

    #sidebar
    {
        background-color: red;
        width: 100px;
        position: fixed;
    }
    #article
    {
        background-color: blue;
        width: 200px;
        margin-left: 100px;
    }
    

    【讨论】:

      【解决方案2】:

      固定位置是您实现这一目标的方式。看看这里:http://jsfiddle.net/wpHMA/

      .wrap {
       width:100%;
       height:100%;
       overflow:auto;
       position:relative;
      }
      .sidebar {
       background:#333;
       color:#fff;
       width:25%;
       height:100%;
       position:fixed;
       top:0;
       left:0;
      }
      .content {
       width:75%;
       float:right;
      }
      

      【讨论】:

        【解决方案3】:

        根据您给定的示例“kevinrose.com”左侧面板是固定位置结构。 您可以使用以下 css/html 代码结构

        CSS

        .leftPan{
            width:27%;
            background-color:#CCC;
            position:fixed;
            left:0;
            min-height:100%;
        }
        .rightPan{
            margin-left:27%;
            height:1000px;
            background-color:#999;
        }
        

        HTML

        <div class="leftPan">
        Left Panel
        </div>
        <div class="rightPan">
        Right Panel
        </div>
        

        这里是jsFiddle File

        【讨论】:

          猜你喜欢
          • 2012-08-14
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2015-08-05
          • 2016-01-23
          • 2023-03-07
          • 1970-01-01
          • 2015-11-06
          相关资源
          最近更新 更多