css实现两侧内容高度自适应

最新推荐文章于 2024-05-05 18:27:38 发布

qq_26144233

最新推荐文章于 2024-05-05 18:27:38 发布

阅读量514

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_26144233/article/details/108589096

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				padding: 0;
				margin: 0;
			}
			.left,.right,.middle{
				width: 260px;
				margin-left: 10px;
				display: block;
			}
			.outer{
				position: relative;
				border: 1px solid red;
				display: inline-block;
				/*兼容ie7*/
				*display:inline;
				*zoom:1;
			}
			.left{
				background: red;
				position: absolute;
				height: 100%;
				top: 0;
				left: 0;
			}
			.middle{
				min-height: 240px;
				background: #CCCCCC;
				/*260+20*/
				margin-left:280px;
				/*260+10*/
				margin-right: 270px;
				/*padding: 20px;*/
			}
			.right{
				background: blue;
				position: absolute;
				top: 0;
				height: 100%;
				right: 0;
			}
			.row1{
				overflow: auto;
				height: 150px;
				padding: 20px;
			}
		</style>
	</head>
	<body>
		<div class="outer">
			<div class="left">
				
			</div>
			<div class="middle">
				<div class="row1">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat laborum nostrum recusandae nisi dignissimos voluptatem sint voluptatibus deserunt ullam quos repudiandae iste nulla atque adipisci cupiditate minima unde numquam ipsum.
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat laborum nostrum recusandae nisi dignissimos voluptatem sint voluptatibus deserunt ullam quos repudiandae iste nulla atque adipisci cupiditate minima unde numquam ipsum.
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat laborum nostrum recusandae nisi dignissimos voluptatem sint voluptatibus deserunt ullam quos repudiandae iste nulla atque adipisci cupiditate minima unde numquam ipsum.
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat laborum nostrum recusandae nisi dignissimos voluptatem sint voluptatibus deserunt ullam quos repudiandae iste nulla atque adipisci cupiditate minima unde numquam ipsum.
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat laborum nostrum recusandae nisi dignissimos voluptatem sint voluptatibus deserunt ullam quos repudiandae iste nulla atque adipisci cupiditate minima unde numquam ipsum.
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat laborum nostrum recusandae nisi dignissimos voluptatem sint voluptatibus deserunt ullam quos repudiandae iste nulla atque adipisci cupiditate minima unde numquam ipsum.
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat laborum nostrum recusandae nisi dignissimos voluptatem sint voluptatibus deserunt ullam quos repudiandae iste nulla atque adipisci cupiditate minima unde numquam ipsum.
				</div>
				<div id="row2">
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat laborum nostrum recusandae nisi dignissimos voluptatem sint voluptatibus deserunt ullam quos repudiandae iste nulla atque adipisci cupiditate minima unde numquam ipsum.
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat laborum nostrum recusandae nisi dignissimos voluptatem sint voluptatibus deserunt ullam quos repudiandae iste nulla atque adipisci cupiditate minima unde numquam ipsum.
					Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias soluta laudantium nobis porro accusantium labore dignissimos fuga et id omnis quasi fugit vel amet in magni assumenda nulla voluptas ratione!
				</div>
			</div>
			<div class="right">
				
			</div>
		</div>
	</body>
</html>

比较：
table中对tr/td的高度设置无效，减少使用。与rowspan/colspan结合使用时，高度/宽度设置在IE浏览器中无效；可以在td中使用div而不再使用rowspan/colspan，来设置块的高度。
如三块div中，左右通过position:absolute;top:0；而中间通过margin来进行页面布局时，此时左右两边的高度是中间内容支撑起来的，需要确保中间内容高度最大，才能使得并列的三个div高度自适应。

	<table>
            <tr>
                <td class="left">
	                <div class="contentBlock">
	                </div>
                </td>
             	 <td class="middle">
             	 		<div class="row1">
             	 		</div>
             	 	   <div class="row2">
           	 	       </div>
             	</td>
             	<td class="right">
             	 <div class="contentBlock">
	                </div>
                </td>
            </tr>
    </table>

qq_26144233

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现两侧内容高度自适应

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ padding: 0; margin: 0; } .left,.right,.middle{ width: 260px; margin-left: 10px;
复制链接

扫一扫