文档章节

页面头部和左侧固定并撑满,只有右侧部分内容改变的布局实现

YXMBetter
 YXMBetter
发布于 2017/08/31 20:33
字数 188
阅读 46
收藏 0
  • 经常会用到这种布局,怎样实现呢?
<style>
    html{
        height:100%;
    }
    body{
        height:100%;
        margin: 0px;
    }
    .all{
        height:100%;
    }
    .top{
        height:50px;
        position:fixed;
        background-color:blue;
    }
    .left{
        width:15%;
        height:100%;
        position:fixed;
        top:50px;
        left:0px;
        background-color:green;
    }
    .contentbg{
        width:85%;
        height:100%;
        position:fixed;
        top:50px;
        left:85%;
        background-color:orange;
    }
    .content{
        width:85%;
        position:relative;
        left:15%;
        top:50px;
        background-color:red;
    }
</style>
<template>
   <!-- 嵌套在body中  -->
<div class="all">
    <div class="top">1</div>
    <div class="left">2</div>
    <div class="contentbg">3</div>
    <div class="content">4</div>
</div>
</template>
  • 试试吧,一定要记住,所有的元素都放在直接能撑开body宽度的盒子了,直接子元素,不能嵌套,不然会被内容撑开高度而不是所有的浏览器高度了。

© 著作权归作者所有

YXMBetter
粉丝 10
博文 173
码字总数 111562
作品 0
昌平
程序员
私信 提问
「前端面试题系列2」如何实现一个圣杯布局?

前言 最近,有个朋友向我诉苦说,面试的时候突然被问到了如何实现布局和原理,有点懵。之前JavaScript的部分回答得挺好的,偏偏在这里翻船了,完全没有思路,后面的面试状态一落千丈。结局也...

Micherwa
01/14
0
0
胡尐睿丶/jquery-weui-contacts

jquery-weui-contacts 通讯录 由于 jquery-weui 本身没有提供常用通讯录的模块页面 所以这里自己整理一个简易通讯录,实现右侧字母快捷导航功能 DEMO 技术实现点 右侧字母快捷导航布局 因为右...

胡尐睿丶
2017/09/27
0
0
renren-aui 1.0-beta2 发布,开箱即用的后台 UI 解决方案

renren-aui是基于vue、element-ui实现的一套后台UI解决方案,无须编译、开箱即用! 具有如下特点: 提供12套主题皮肤,可灵活切换主题 支持头部(流线/固定)布局、(白色/鲜艳)皮肤 支持...

独孤求胜16
2018/11/26
2.1K
3
OSChina 新首页头部的设计思路

年后要着手 OSChina 首页改版,前些天简单设计了一个新的首页头部,样子如下: 可以通过 http://www.oschina.net/newindex 这个链接来访问。 中间的部分还没开始考虑。 我先说一下这个头部的...

红薯
2013/02/17
2.1K
33
Flex 布局教程:实例篇

上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法。 你会看到,不管是什么布局,Flex往往都可以几行命令搞定。 我只列出代码,详细的语法解释请查阅《Flex布局教程:语法篇》。我...

黄金林
2016/12/21
8
1

没有更多内容

加载失败,请刷新页面

加载更多

nproc systemd on CentOS 7

Increasing nproc for processes launched by systemd on CentOS 7 Ask Question I have successfully increased the nofile and nproc value for the local users, but I couldn't find a p......

MtrS
45分钟前
3
0
了解微信小程序下拉刷新功能

小程序提供了这个事件。 onPullDownRefresh() 监听用户下拉刷新事件。 如果要开启下拉刷新功能,要先到json配置: "enablePullDownRefresh":true 配置后下拉有反应了但是没有加载效果,在onP...

oixxan__
今天
2
0
springmvc java对象转json,上传下载(未完)拦截器Interceptor以及源码解析(未完待续)

package com.atguigu.my.controller;import java.util.Collection;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Contr......

architect刘源源
今天
29
0
[日更-2019.5.24、25、26] Android系统中的Binder通信机制分析(一)--servicemanager

声明 其实对于Android系统Binder通信的机制早就有分析的想法,记得去年6、7月份Mr.Deng离职期间约定一起对其进行研究的,但因为我个人问题没能实施这个计划,留下些许遗憾... 最近,刚好在做...

Captain_小馬佩德罗
昨天
24
0
聊聊dubbo的DataStore

序 本文主要研究一下dubbo的DataStore DataStore dubbo-2.7.2/dubbo-common/src/main/java/org/apache/dubbo/common/store/DataStore.java @SPI("simple")public interface DataStore { ......

go4it
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部