文档章节

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

YXMBetter
 YXMBetter
发布于 2017/08/31 20:33
字数 188
阅读 34
收藏 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
博文 170
码字总数 109417
作品 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
OSChina 新首页头部的设计思路

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

红薯
2013/02/17
2.1K
33
renren-aui 1.0-beta2 发布,开箱即用的后台 UI 解决方案

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

独孤求胜16
11/26
2.1K
3
Flex 布局教程:实例篇

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

黄金林
2016/12/21
8
1

没有更多内容

加载失败,请刷新页面

加载更多

微服务分布式事务实现

https://www.processon.com/view/link/5b2144d7e4b001a14d3d2d30

WALK_MAN
今天
2
0
《大漠烟尘》读书笔记及读后感文章3700字

《大漠烟尘》读书笔记及读后感文章3700字: 在这个浮躁的社会里,你有多久没有好好读完一本书了? 我们总觉得自己和别人不一样,所以当看到别人身上的问题时,很少有“反求诸己”,反思自己。...

原创小博客
今天
4
0
大数据教程(9.5)用MR实现sql中的jion逻辑

上一篇博客讲解了使用jar -jar的方式来运行提交MR程序,以及通过修改YarnRunner的源码来实现MR的windows开发环境提交到集群的方式。本篇博主将分享sql中常见的join操作。 一、需求 订单数据表...

em_aaron
今天
3
0
十万个为什么之什么是resultful规范

起源 越来越多的人开始意识到,网站即软件,而且是一种新型的软件。这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(high latency)、高并发等特点...

尾生
今天
3
0
Terraform配置文件(Terraform configuration)

Terraform配置文件 翻译自Terraform Configuration Terraform用文本文件来描述设备、设置变量。这些文件被称为Terraform配置文件,以.tf结尾。这一部分将讲述Terraform配置文件的加载与格式。...

buddie
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部