CSS 经典案例 两列布局 左固定 右自适应 高度自适应

最新推荐文章于 2025-05-09 19:48:32 发布
转载 最新推荐文章于 2025-05-09 19:48:32 发布 · 2.3k 阅读 · 0

本文介绍了一种通过CSS实现的两列等高布局方法，适用于网页设计中需要两边内容高度一致的情况。文章通过具体的HTML和CSS代码示例，详细展示了如何让左侧栏和主要内容区在高度上保持同步。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>两列高度自适应</title>
<style type="text/css">
<!--
*{margin:0;padding:0;}
#top{background:#dcdcdc;height:30px;}
#main{overflow:hidden;}
.sidebar{float:left;width:150px;background:#ff0000;}
.content{background:#333333;overflow:hidden;_float:left;/*兼容IE6*/}
.row{margin-bottom:-10000px;padding-bottom:10000px;/*内外补丁是关键*/}
#footer{clear:both;height:30px;background:#0000ff;}
-->
</style>
</head>
<body>
<div id="container">

<div id="top"></div>

<div id="main">

<div class="sidebar row">
我在左边<br /> 
我在左边<br /> 
我在左边<br />
我在左边<br /> 
我在左边<br /> 
我在左边<br /> 
我在左边<br />
我在左边<br />
我在左边<br /> 
我在左边<br />
我在左边<br /> 
我在左边<br />
我在左边<br />
我在左边<br />
我在左边<br />
我在左边<br /> 
我在左边<br />

</div>

<div class="content row">
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />
我在正文<br />

<span style="float:right; font-size:0; position:relative; ">&nbsp;</span> <!--为了万恶的ie6-->

</div>

</div>

<div id="footer"></div>

</div>
</body>
</html>
qq_34884656
关注
CSS Grid布局实战：10个经典案例带你玩转网页布局
小白菜的博客
05-23 817
本文的目的是帮助读者全面掌握CSS Grid布局，并通过实际案例展示其在网页设计中的应用。范围涵盖了CSS Grid布局的基础概念、核心原理、具体操作步骤以及10个经典的实战案例。本文适合有一定HTML和CSS基础，想要进一步提升网页布局能力的前端开发者、网页设计师以及对网页设计感兴趣的初学者。本文首先介绍CSS Grid布局的核心概念和相关术语，然后通过故事引入的方式解释核心概念。接着详细阐述核心概念之间的关系，并给出原理和架构的文本示意图以及Mermaid流程图。之后讲解核心算法原理和具体操作步骤，介绍
css经典全布局
weixin_44667463的博客
02-20 1640
css经典超全布局
七种实现左侧固定，右侧自适应两栏布局的方法
weixin_33735077的博客
08-16 1324
总结一下左边固定，右边自适应的两栏布局的七种方法。其中有老生常谈的float方法,BFC方法，也有CSS3的flex布局与grid布局。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。关于最终的效果，可以查看这里 常用的宽度自适应的方法通常是利用了block水平的元素宽度能随父容器调节的流动特性。另外一种思路是利用CSS中的c...
div-css-两列高度自适应
iteye_6992的博客
05-07 173
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta
CSS两列高度自适应，右边自适应
u011927449的博客
08-08 225
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS两列高度自适应，右边自适应</title> <style> html,body{ width:100%; height:100%; } body,div{ .
input左边固定宽度，右边自适应布局
荆轲刺秦王
06-14 653
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>左边固定宽度，右边自适应布局</title> <style> .form-wap{ position: relative; } ...
DIV+CSS左右两列自适应高度
卯野芽衣子
11-06 427
费大富大贵
经典漂亮的三列布局XHTML+CSS模
12-20
在网页设计领域，"经典...总的来说，"经典漂亮的三列布局XHTML+CSS模板"是一个综合性的网页设计课题，涵盖了网页结构、样式控制、布局技巧等多个方面，对于初学者和专业开发者来说，都是一个值得深入学习和实践的案例。
第九章 DIV+CSS布局
whitesandcnm的博客
11-04 1978
DIV + CSS 是一种用于网页布局和样式设计的前端开发技术组合，通常用于替代传统的表格布局。它以结构与样式分离为核心理念，将HTML（结构）与CSS（样式）独立处理，提高网页的可维护性和兼容性。DIV 是 HTML 中的一个标签（），用于定义页面中的分块或容器元素，作为网页布局的基础。它本身没有任何样式，仅仅是一个结构上的容器。CSS（层叠样式表，Cascading Style Sheets）是一种样式表语言，用于控制网页元素的显示方式，包括颜色、字体、间距、布局等。
CSS多列布局：前端内容排版的新方式
最新发布
小白菜的博客
05-09 771
在前端开发中，页面内容的排版一直是至关重要的环节。传统的排版方式在处理多列内容时往往显得力不从心，代码复杂且缺乏灵活性。CSS多列布局的出现为前端开发者提供了一种简洁、高效的方式来实现多列排版。本文的目的是全面介绍CSS多列布局的原理、使用方法、实际应用场景等，帮助开发者更好地掌握这一技术。范围涵盖了从基础概念到实际项目应用的各个方面，包括核心算法原理、数学模型、代码实现等。本文将按照以下结构进行组织：首先介绍CSS多列布局的背景信息，包括目的、读者和文档结构。
左侧固定，右侧宽度自适应
cindy_rain的博客
11-20 1864
这里用到两种方法实现实现一个两列布局，其中左侧部分宽度固定、右侧部分宽度随浏览器宽度的变化而自适应变化 。每个例子我都用两幅图对比效果。黄色部分的宽度就是大框架的宽度，我们可以看到红色区域不发生改变，红色区域随着黄色区域宽度的改变而改变。 html部分<div class="box1"> <div class="divA">DIVA</div> <div class="divB">
左右两列自适应高度
weixin_30916125的博客
10-17 180
DIV+CSS左右两列自适应高度的方法 说明：其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点：一是在最外层加上overflow:hidden，然后在左边列加上margin-bottom:-9999px;padding-bottom:9999px;即可。 如何让2个并列的div根据内容自动保持同等高度 js方法 转载于:https://www.cnblogs.com/yangai...
css实现左侧固定宽度，右侧宽度自适应
cristina_song的博客
10-28 899
1，固定宽度区浮动，自适应区不设宽度而设置 margin<!DOCTYPE html> <html> <head> <style type="text/css"> #wrap { overflow: hidden; *zoom: 1; } #content ,#sidebar {
四种简单实用的左固定右自适应简单布局
weixin_43683430的博客
11-13 729
三种适合新手的左固定右自适应简单布局 我是新手 觉得有不对的大家请指正 第一种： 布局： a、b两个盒子 a为左边盒子 b为右边盒子 a设置固定宽度 左浮动 b设置左外边距=a的宽度 第二种： 布局： flex弹性布局 采用Flex布局的元素，称为Flex容器（flex container），简称&quot;容器&quot;。 该方法我不太理解 但是确实特别好用 第三种 布...
html 左边固定右边自动,七种实现左侧固定，右侧自适应两栏布局的方法
weixin_34634231的博客
05-30 2203
总结一下左边固定，右边自适应的两栏布局的七种方法。其中有老生常谈的float方法,BFC方法，也有CSS3的flex布局与grid布局。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。关于最终的效果，可以查看这里常用的宽度自适应的方法通常是利用了block水平的元素宽度能随父容器调节的流动特性。另外一种思路是利用CSS中的calc()方法来动态设定宽度。还有一种思路是，利用CSS中的新...
解决左边宽度固定，右边宽度随浏览器自适应的3种方案
weixin_42017221的博客
02-08 2182
实现左边固定，右边随浏览器自适应的主要是通过 flex 布局或者 float 浮动。使用 float 时，左边元素设置固定宽度，右边元素设置相应的 margin-left 值。使用 flex 时，如果左边元素宽度使用 flex-basis 属性，右边元素可设置 flex-grow 为 1 或者 flex 为 1。如果左边元素宽度使用 min-width 属性，右边元素除了可以设置 flex-grow 为 1，或者 flex 为 1，还可以设置宽度 100%。
css实现左边定宽右边自适应的两列布局5种方法
程序员秋风的博客
02-22 5283
在项目实践中不乏有需要两列式布局，左侧固定右侧自适应是比较常见的布局方式，现在我就来总结一下我自己所知道的5种方法。 html代码结构：<div class="box"> <div class="con1"> 我是左边 </div> <div class="con2"> 我是右边 </div> </div>第一种： css代码：.b
css两列布局，左边固定，右边自适应的几种方法
我的个人博客
05-22 386
css两列布局，左边固定，右边自适应 html <div> <div class="box"> <div class="box1">1</div> <div class="box2">2</div> </div> <div class="box2"> <div class="box1">1</div> .
el-row高度设置，分栏布局高度自适应
热门推荐
farmland
06-02 1万+
el-row和el-col 处理动态多列数据时， 出现了高度不适应且排列混乱 1、el-row加上样式属性 .el-row-inline { display: flex; flex-wrap: wrap; } 2、内部元素设置高度100% .el-card { min-width: 100%; height: 100%; } ...
CSS实现左侧固定宽度右侧自适应宽度等高布局
这个问题的关键点在于如何实现左侧固定宽度，右侧自适应屏幕宽度的布局，并且左右两列需要等高布局，最后还需要满足最小高度的要求。 首先，我们需要了解这个问题的要求。左侧固定宽度，右侧自适应屏幕宽度，这意味...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值