Question

我想设计一个网页，使用页面顶部的固定标题和页面左侧的固定菜单。我希望其他部分是浮动div。我怎么能这样做？

感谢。

Answer 1

我认为你想要的是创建一个标题固定位置并将菜单放在标题内并使菜单向左浮动，如下例所示

HTML：

<header>
    <nav>
        <ul class="menu">
            <li>
                <a href="">test</a>
            </li>
            <li>
                <a href="">test</a>
            </li>
            <li>
                <a href="">test</a>
            </li>
            <li>
                <a href="">test</a>
            </li>
            <li>
                <a href="">test</a>
            </li>
        </ul>
    </nav>
</header>

的CSS：

header {
    display:block;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:50px;
    background:#000;
}

header .menu {
    float:left;
    text-align:left;
}

header .menu li {
    display:inline-block;
    margin:0 10px;
}

header .menu a {
    color:#fff;
    text-decoration:none;
}

http://jsfiddle.net/8TB6e/

Answer 2

试试这个，

<div class='header'>
<!--Whatever you want to include in the header section-->
</div>
<div class='leftsidebar'>
<!--Whatever you want to include in the left section-->
</div>
<div class='main-content'>
<!--This is your general section-->
</div>

现在CSS将是，

.header{
position: fixed;
top:0px;
height:70px;
background-color: red;
width:100%;
}
.leftsidebar{
position: fixed;/*write relative if you don't want this to be fixed*/
left:0px;
background-color: aqua;
top:70px;
width:100px;
height: auto;

}
.main-content{
position:relative;
left:100px;
top:70px;
}

告诉我这是否有帮助：）

Answer 3

据我所知，你不能浮动固定元素。可以这样想：所有三个div都将被修复，但看起来像是浮动的！试试这个CSS：

        #header{
            position: fixed;
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100px;
            background: black;
        }
        #left_nav{
            position: fixed;
            top: 100px;
            left: 0px;
            width: 10%;
            height: 600px;
            background: red;
        }
        #content{
            width: 90%;
            height: 600px;
            background: blue;
            position: fixed;
            top: 100px;
            left: 100px;
            overflow: scroll;
        }
        #just_to_activate_the_scroller{
            width: 150px;
            height: 1000px;
        }

HTML：

<body>
        <div id="header"></div>
        <div id="left_nav"></div>
        <div id="content">
            <div id="just_to_activate_the_scroller"></div>
        </div>
</body>

组合位置：固定浮动

3 个答案: