固定/流动混合布局做首页

末蓝、 2022-06-02 08:28 180阅读 0赞

效果图.jpg

这是传统的页面布局方式，里面有几个小知识点。

*  三个栏的宽度如何设置，采用的是xx%方式。
 *  中间三个栏如何固定，采用的是float方式。
 *  因为文字内容较少，背景颜色只会填充padding部分，如何使栏适度变长。

根据上面提出的问题，最后一个是稍微难点的，  
因为背景颜色填充的是padding区域，我们可以想把padding-bottom拉长，这样背景颜色就会相机变长。但是又会出现一个问题，页面会根据你文本的长度基础上增加padding-bottom的长度。就会出现下面长短不一的局面。

底部长度不一的局面.jpg

并且footer也被隔的很开。如何解决呢？

### 试着用margin属性呢？ ###

padding-bottom: 2000px;
    margin-bottom: -2000px;

因为margin表示的模块之间的距离，我们就想把尾部和三个栏之间的距离往上顶2000px，不就回到了最大文本所占的地方。

#### 这样做发现footer不见了，为什么呢？ ####

因为foote往上面升了，导致跟上面元素重合，无法显现。

#### 该怎么让footer出现呢？ ####

只要让三栏所超出的部分隐藏起来就行了

overflow：hidden

总的代码如下

body{
    margin: 0;
    padding: 0;
    min-width: 525px;
    }

/*在固定/流动混合布局中定义两栏*/

header,footer{
    float: left;
    width: 100%;
    height: 30px;
    background-color: #7152f4;
      }

/*三个栏的母元素*/

# wrapper\{ #

position: relative;
    width: 100%;
    overflow: hidden;

\}

# left\_side\{ #

width: 25%;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
    float: left;
    background-color:orange;

\}

# content\_area\{ #

width: 50%;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
    float: left;
    background-color: #fff;

\}

# right\_side\{ #

width: 25%;
    margin-bottom: -2000px;
    padding-bottom: 2000px;
    float: right;
    background-color: pink;

\}

发表评论取消回复

表情：

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

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

相关阅读

相关 P03：博客首页主体的两栏布局

React Hooks+Laravel 前端博客实战阐述对公用头部的微调编写首页的左右两列布局其他页面的大结构复制 \`blo

朴灿烈づ我的快乐病毒、/ 2023年10月06日 21:02/ 0 赞/ 27 阅读

相关 04Flutter仿京东商城项目首页商品列表布局

Home.dart import 'package:flutter/material.dart'; import 'package:flutter_swipe

系统管理员/ 2023年08月17日 15:58/ 0 赞/ 144 阅读

相关 day02 - 首页布局 + 用户管理

今日目标 1. 实现后台首页的基本布局 2. 实现左侧菜单栏 3. 实现用户列表展示 4. 实现添加用户 1.后台首页基本布局打开`Home.vue`组

矫情吗；*/ 2022年12月24日 01:57/ 0 赞/ 190 阅读

相关商城首页 html,商城首页.html

商城首页 $axure.utils.getTransparentGifPath = function() \{ return 'resources/images/tra

我就是我/ 2022年10月09日 06:30/ 0 赞/ 242 阅读

相关响应式/自适应/流动布局

文章目录响应式布局 1. 控制视口（viewport） 2. 媒体查询 2.1 媒体类型 2.

一时失言乱红尘/ 2022年09月05日 05:17/ 0 赞/ 312 阅读

相关 CSS仿淘宝首页导航条布局效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

缺乏、安全感/ 2022年07月25日 17:59/ 0 赞/ 221 阅读

相关固定/流动混合布局做首页

效果图.jpg 这是传统的页面布局方式，里面有几个小知识点。三个栏的宽度如何设置，采用的是xx%方式。中间三个栏如何固定，采用的是float方式。因

末蓝、/ 2022年06月02日 08:28/ 0 赞/ 181 阅读

相关 jsoup爬虫简书首页数据做个小Demo

> 代码地址如下： > [http://www.demodashi.com/demo/11643.html][http_www.demodashi.com_demo_116

一时失言乱红尘/ 2022年05月30日 09:17/ 0 赞/ 187 阅读

相关 ionic3固定首页内容有阴影线问题

原文出处：[https://blog.csdn.net/cangahi09025566/article/details/81027424][https_blog.csdn.ne

港控/mmm°/ 2022年04月05日 08:26/ 0 赞/ 145 阅读

相关 discuz论坛首页默认显示单个特定的版块,及自定义论坛首页固定标题

比如discuz论坛首页,打开后,默认就显示的fid编号为2的某个板块,但是这个首页打开后.他的标题,即模板上的title还可以单独定义. 如果我们在直接仿问这个版块.比如f

爱被打了一巴掌/ 2021年09月26日 00:40/ 0 赞/ 5304 阅读