文档章节

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

YXMBetter
 YXMBetter
发布于 2017/08/31 20:33
字数 188
阅读 32
收藏 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
粉丝 9
博文 164
码字总数 107360
作品 0
昌平
程序员
使用Boostrap,左侧菜单栏固定宽度,右侧自适应宽度。

1、需求和问题 因为Bootstrap框架是自适应布局的。所以当把菜单栏放在 .col-*-n 的时候。菜单栏会根据浏览器窗口的大小进行缩放调整。从而会产生很多问题。比如与头部导航栏对齐的问题。比如...

Asktao
2016/04/05
3.2K
0
胡尐睿丶/jquery-weui-contacts

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

胡尐睿丶
2017/09/27
0
0
Flex 布局教程(实例)

你会看到,不管是什么布局,Flex往往都可以几行命令搞定。 详细的语法解释请查阅《Flex布局教程(语法篇)》。主要参考资料是Landon Schropp的文章和Solved by Flexbox。 一、骰子的布局 骰子的...

botkenni
2016/10/09
49
0
Flex 布局教程:实例篇

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

黄金林
2016/12/21
8
1
Flex 布局教程:实例篇

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

阮一峰
2015/07/14
0
0

没有更多内容

加载失败,请刷新页面

加载更多

设计模式之 明确责任 观察者模式 状态模式 责任链模式

观察者模式是任务分发的一种模式。 如果认为我们设计的系统的各个模块(或子系统)的最终目的是完成共同任务,那么这个任务如何分配到多个模块的就是我们遇到的第一个问题。简单设计场合我们...

backbye
19分钟前
2
0
14-利用思维导图梳理JavaSE-大汇总

14-利用思维导图梳理JavaSE-Java基础知识大汇总 主要内容 1.对象入门 2.一切都是对象 3.程序流程控制 4.初始化和消除 5.权限访问控制 6.复用类 7.多态 8.接口与抽象类 9.内部类 10.容器 11.异...

飞鱼说编程
54分钟前
6
0
利用Lombok编写优雅的spring依赖注入代码,去掉繁人的@Autowired

大家平时使用spring依赖注入,都是怎么写的? @Servicepublic class OrderService { @Autowired private UserService userService;} 是不是很熟悉的感觉?但是呢 如果你用...

HeyS1
今天
26
0
IBATIS 写BLOB字段遇到的问题

1、 首先遇到的配置问题,通过设置typeHandler 来支持写入。接下来由此引出了事务的问题。 <typeHandler jdbcType="BLOB" javaType="[B" callback="org.springframework.orm.ibatis.support....

echo-neo
今天
1
0
37. Sudoku Solver

Description tags: backtrack,hash table difficulty: hard Write a program to solve a Sudoku puzzle by filling the empty cells.A sudoku solution must satisfy all of the following......

52iSilence7
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部