两个div右侧固定，左侧自适应屏幕

先上一张截图

再上代码

css:

bigBox{margin:0;}
.rightBox{position:fixed;right:0;top:200px;width:350px;height:300px;background:gray;}
.leftBox{float:left;width:100%;;}
.leftContend{margin-right:360px;background:bisque;height:1000px;}

html:

<div class="bigBox">
<div class="leftBox">
<div class="leftContend">
<p>左侧自适应</p>
</div>
</div>
<div class="rightBox">
<p>右侧固定</p>
</div>
</div>

还可以

第一篇博文，还是动手写写吧，正好今天的需求是这样

<div class="content cl reportContent"><div class="report_nav"><ul class="nav_ul cl"><li class="nav_list cur"><p>农务报告</p></li><li class="nav_list"><p>农户</p></li><li class="nav_list"><p>条田</p></li><li class="nav_list"><p>合同</p></li><li class="nav_list"><p>田间管理</p></li></ul></div><div class="reportRight"></div></div>

.reportContent{overflow: hidden;
}
.reportContent .report_nav{width:260px;background: #f6f6f6;float:left;
}

.reportRight{
    margin-left:260px;
    height:100px;
    background:#fff;
}

这样也是可以的，父元素设置overflow:hidden，左侧元素设置一个宽度，float:left，右侧子元素设置margin-left：左侧元素宽度。
子元素设置margin-top;让父元素不受影响；父元素设置border:1px solid transparent; 加上float或者position:absolute；

两个div右侧固定，左侧自适应屏幕相关推荐

两个div并排左边div宽固定右边自适应
实现两个div,左边固定div宽度200px,右边div自适应 <div class= "container"><div class="left&quo ...
在php中页面布局 3列左右侧固定中间自适应居中,css三列布局--两边固定中间自适应和中间固定两边自适应...
三列布局本篇讲三列布局,面试常考题,自己总结的,如有什么问题,欢迎指出!我会用红色标注出主要作用部分,都是最精简的写法,,没有多余的修饰. 布局方式一:两边固定中间自适应 1.flex布局思路:将 ...
html两个div一个在前一个在后,html/css 两个div在同一行
在界面设计的时候,经常需要将两个div在同一行显示. 但是每次都会忘记怎么做,特此随笔,备忘. 如以下要将"第一个div"和"第二个div"显示在同一行: /* ...
厚积薄发前端学习笔记 CSS基础篇-左侧固定，右侧自适应（或右侧固定，左侧自适应）布局方法...
这是我们经常可能会遇到到一种布局方法,或者是右侧固定,左侧自适应,下面列出我归纳总结的几种方法,是实际开发中比较常用和实用的几种方法 GitHub项目链接写在前面归纳总结了几种比较ok的方法,左右 ...
css布局：左边固定宽度，右边自适应宽度或右侧固定，左侧自适应三种方法
方法一:浮动布局这种方法我采用的是左边浮动,右边加上一个margin-left值,让他实现左边固定,右边自适应的布局效果 HTML Markup <div id="left" ...
div固定在浏览器顶部_手写几种常见的css布局，1垂直两栏左边固定右边自适应，垂直3栏左右固定中间自适应...
1垂直两栏右边固定左边自适应的四种写法 <!DOCTYPE html> <html lang="en"><head><meta chars ...
html如何左侧固定div,详解左右宽度固定中间自适应html布局解决方案
原标题:详解左右宽度固定中间自适应html布局解决方案本文介绍了详解左右宽度固定中间自适应html布局解决方案,分享给大家,具体如下: a.使用浮动布局 html结构如下 left right ce ...
css左侧盒子固定右边自适应
盒子左侧固定右边自适应使用浮动加外边距设置父盒子高度,让子盒子高度100%继承父盒子,给做盒子设置宽度和浮动背景色,然后给右侧盒子设置marginleft宽度和背景色 <style>.b ...
div自适应屏幕高度
问题描述:本地项目页面左侧菜单点击父亲节点拉伸出子节点后,演示的阴影不能覆盖所有的左侧菜单,现象如下图:此时整个演示的页面要通过滚动条才能看到整个菜单内容整个菜单都放在div中,div的父亲节点为b ...

两个div右侧固定，左侧自适应屏幕

两个div右侧固定，左侧自适应屏幕相关推荐

最新文章

热门文章