css经典布局上下左右

绝地灬酷狼 2021-10-23 20:42 539阅读 0赞

头部：定高100px，宽度自适应100%  
左侧：定宽200px，高度铺满  
右侧：宽度铺满自适应，高度铺满  
底部：定高50px，宽度100%

整体页面无滚动条，内容区有滚动条

页面样式：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQyOTY3_size_16_color_FFFFFF_t_70]

**代码：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>css经典布局</title>
    		<style> html,body{ margin: 0;padding: 0;width: 100%;height: 100%; overflow: hidden;} .header{ width: 100%;height: 100px;} .content{ width: 100%;position: absolute;top: 100px;bottom: 50px;} .menu{ width:200px;height: 100%;float:left;overflow: auto;background-color: aliceblue;} .main{ height: 100%;margin-left:200px;overflow: auto;background-color: bisque;} .footer{ width: 100%;height: 50px; position: fixed;bottom: 0;z-index: 10;} </style>
    	</head>
    	<body>
    		<div class="header">header</div>
    		<div class="content">
    			<div class="menu">menu</div>
    			<div class="main"> main </div>
    		</div>
    		<div class="footer">footer</div>
    	</body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyNDQyOTY3_size_16_color_FFFFFF_t_70]: /images/20211023/b141d79de30c464f9f12b97f8c0dde26.png

发表评论取消回复

表情：

评论列表（有 0 条评论，539人围观）

还没有评论，来说两句吧...

相关阅读

相关 css上中下布局

css上中下布局样式如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0...

向右看齐/ 2024年04月18日 21:25/ 0 赞/ 60 阅读

相关 CSS上下居中左右居中

一、 > 1、容器内部元素上下左右居中 > 2、内部元素每行的高度以最高的为准 <div style="margin-top: 10px;

一时失言乱红尘/ 2024年03月22日 15:07/ 0 赞/ 66 阅读

相关 css经典布局——双飞翼布局

圣杯布局的出现是来自由 Matthew Levine 在 2006 年写的一篇文章 [《In Search of the Holy Grail》][In Search of

客官°小女子只卖身不卖艺/ 2022年12月06日 04:18/ 0 赞/ 167 阅读

相关【CSS】CSS经典布局之绝对底部布局

转载自：[CSS经典布局之Sticky footer布局][CSS_Sticky footer] -------------------- 何为Sticky footer

╰+哭是因爲堅強的太久メ/ 2022年06月02日 08:39/ 0 赞/ 257 阅读

相关 CSS经典布局~圣杯布局

为了实现中间自适应，两边固定的最好解决方法, 话不多说，直接撸代码吧。 HTML部分： <div class="wrap"> <div id="hea

男娘i/ 2022年05月19日 02:38/ 0 赞/ 256 阅读

相关 CSS完成网页经典布局

单列布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>一列

╰+攻爆jí腚メ/ 2022年02月24日 01:26/ 0 赞/ 253 阅读

相关【CSS】CSS经典布局之绝对底部布局

转载自：[CSS经典布局之Sticky footer布局][CSS_Sticky footer] -------------------- 何为Sticky footer

傷城~/ 2022年01月23日 20:43/ 0 赞/ 541 阅读

相关 DIV+CSS上中下布局案例

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>上中下DIV+CSS布局案例</titl

布满荆棘的人生/ 2021年12月05日 02:07/ 0 赞/ 237 阅读

相关 css上下左右箭头

代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

男娘i/ 2021年11月23日 14:54/ 0 赞/ 365 阅读

相关 css经典布局上下左右

头部：定高100px，宽度自适应100% 左侧：定宽200px，高度铺满右侧：宽度铺满自适应，高度铺满底部：定高50px，宽度100% 整体页面无滚动条，内容

绝地灬酷狼/ 2021年10月23日 20:42/ 0 赞/ 540 阅读