CSS常见页面布局

最新推荐文章于 2024-04-26 15:21:52 发布

TAO_GIS

最新推荐文章于 2024-04-26 15:21:52 发布

阅读量436

点赞数

分类专栏：前端文章标签： html 前端 css

本文链接：https://blog.csdn.net/TAO_GIS/article/details/81015580

版权

前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

左侧固定，右侧自适应：

index.html:

        <div id="outer">
            <div id="sidebar" >左侧固定宽度区</div>
            <div id="content" >我是右侧块级元素</div>
        </div>
        <!-- <div id="footer">我是footer,后面的一个DIV，以确保前面的定位不会导致后面的变形</div> -->

最后一行为footer，可选择添加。

index.css:

            #sidebar {
                width: 300px;
                height: 300px;
                background-color: pink;
                float: left;
            }

            #content {
                margin-left: 300px;    
                height: 100px;
                background-color: blue;
            }

            #footer {
                background-color: red;
            }

            #outer:after {
                display: block;
                content: '';//不写内容
                clear: both;//清除浮动，使该元素位于sidebar下方，使他之后的footer位于下方
                background-color: blanchedalmond;
                visibility: hidden; 
            }
            
            #outer {
                zoom: 1;//用于放大缩小查看样式，可以不写
                background-color: brown;
            }

总结：将侧边栏设置 float：left , width:300px(300px只是举个例子，可以任意设置)，右半部份设置margin-left:300px，不设置宽高，使其宽高自适应（此时宽度为100%-300px，高度为100%）。如果需要footer则设置outer：after清除浮动。

效果图如下：

上下高度固定，中间滚动

css:

            html{
                height: 100%;
            }
            body{
                height: 100%; 
                margin: 0;                      
            }
            header {
                width: 100%;
                height: 120px;
                background-color: aqua;
            }

            main {
                background-color: rgba(128, 128, 128, 0.05);
                width: 100%;
                height: calc(100% - 170px);
                overflow: scroll;
            }
            main div{
                height: 900px;
            }

            footer {
                position: absolute;
                bottom: 0;
                width: 100%;
                height: 50px;
                background-color: rgb(37, 37, 37);
                color: rgb(112, 112, 112);
            }

html:

    <body>
        <header>
            头部内容
        </header>
        <main>
            <div>我是中间的内容</div>
        </main>
        <footer>
            底部内容
        </footer>
    </body>

效果图：

背景图+登录界面:

html:

           <body>
              <div class="bg1">
                 <img src='../../../assets/images/portal/jm_bg_loginPage.jpg' />
              </div>
              <div class="login">
              </div>
           </body>

css:

html{
    width: 100%;
}
body{
    width: 100%;
    overflow: hidden;
}
.bg1{
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}
.bg1 img{
    width: 100%;
    height: 100%;
}
.login{
    background-color: rgba(255, 255, 255, 0.9);
    color: rgb(68, 63, 56);
    position: absolute;
    right: 10%;
    top: 0;
    bottom: 0;
    width: 385px;
    height: 100%;
}

效果图:

效果说明:大于1024px时,背景随窗口缩放而缩放,右侧白色内容块保持绝对位置;小于1024px时,多余内容隐藏

TAO_GIS

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS常见页面布局

左侧固定，右侧自适应： index.html: &lt;div id="outer"&gt; &lt;div id="sidebar" &gt;左侧固定宽度区&lt;/div&gt; &lt;div id="content" &gt;我是右侧块级元素&lt;/div&gt; &a
复制链接

扫一扫