div三行或三列铺满全屏

最新推荐文章于 2024-05-15 23:37:19 发布

ch206265

最新推荐文章于 2024-05-15 23:37:19 发布

阅读量3.5k

点赞数 5

分类专栏： # CSS 文章标签： div三行或三列铺满全屏

本文链接：https://blog.csdn.net/ch206265/article/details/89058255

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

文章目录

一、实现要求

铺满屏，字体居中
交互，点击一个盒子能够改变另外一个盒子的颜色
最开始的实现效果使这样的：

但是有些问题：

字体只有水平居中，没有垂直居中；
第三行的盒子最右边没有铺满，并且，我理解的铺满全屏是指完全铺满，既没有剩余空白，也不会让内容一屏显示不完，也就是说要让屏幕右侧的滚动条和下面的滚动条消失，内容显示完整并且铺满屏幕；
还没有实现交互。因此，布局上的最终实现效果希望如下图：

二、实现过程

1. 字体水平居中和垂直居中

1.1水平居中：

文字的水平居中是通过在div中加入text-align:center实现的，text-align常常用于盒子里的文字、图片等内容居左、居中、局右。
关于text-align的用法可以参考：text-align的用法 - 老小孩 - CSDN博客，讲的很清楚：给父级设置text-align这个属性，只会对其子元素是行级以及行级块元素起作用，且子元素会继承text-align这个属性对其文本起作用。
拿原文中的这个图示例：

对父级使用text-align:center; 会对img，input等行内块元素以及行级元素span有居中的效果。

对块级元素div以及h2看似也有居中效果？这是为什么呢？
观察可以发现我们并没有给div和h2设置宽高，当没有设置宽高的时候，其宽度继承了父级的，高度是由文本撑开，当然也继承了父级的text-align:center;

但是设置了宽高的块级元素p标签，此时它本身不是水平居中，而其文本是居中的,当我们把p元素转换为行级块元素的时候，会发现，不仅p元素中的文本居中了，其自身也居中了。

作者：阳光下的女汉子
来源：CSDN 原文：https://blog.csdn.net/weixin_44307807/article/details/85872703
版权声明：本文为博主原创文章，转载请附上博文链接！

1.2垂直居中：

关于垂直居中，能实现的方法比较多，网上也有很多很棒的博文：

我这里只需要对单行文本进行垂直居中，所以就用了line-height属性就可以实现了；
但是，这方法有个问题，如果父元素的height值不知道或者用的百分比表示或者是auto怎么办？
当初想到的是line-height也用百分比表示呗，定义成100%，然而：line-height属性不能通过百分比设置实现垂直居中，这是因为这里的百分比并不是相对于父元素尺寸而言，而是相对于字体尺寸来讲的。
所以，用这个方法，其实我的最终实现里面那个黄色部分字体并没有真正的垂直居中，只是比较靠近中央位置。还需要再修改。

2. 行列铺满全屏

首先，使用* {margin:0;padding:0;}把所有盒子的内外边距都设置为0，有需要边距的再添加，一定要养成这个习惯。将所有的盒子整体上分成三部分，header，middle1和footer，然后又将footer分成三部分：left，middle和right，这就相当于要实现header，middle1和footer三个div竖排铺满全屏和left，middle和right三个div横排铺满全屏。

2.1 竖排铺满全屏：

竖排铺满全屏，相当于上下div高度height固定，中间自适应的布局。需要注意的点是：

三个盒子的position属性都设置为absolute，都脱离了文档流；
第一个盒子header不设置边偏移，所以没有偏移，紧贴浏览器窗口左上角，宽度100%占满一行；
第三个盒子footer边偏移只设置bottom，为0，紧贴浏览器左下角，宽度100%占满一行；
第一个和第三个盒子的height为固定值，中间的为auto

div.header{
    width: 100%;
    height:250px;
    line-height: 250px;/*注意line-height值要与footer容器height值相同*/
    text-align: center;
    font-size:20px;

    position :absolute;
}
div.middle1{
    width:100%;
    height:auto;/*中间容器的height值设置为auto*/
    text-align: center;
    line-height: 250px; 
    font-size:20px;

    position :absolute;
    top:250px;
    bottom:200px;
}
div.footer{
    width:100%;
    height :200px;
    line-height: 200px;/*注意line-height值要与footer容器height值相同*/
    text-align: center;
    font-size:20px;

    position: absolute;
    bottom:0; 
}

2.2 横排铺满全屏：

横排铺满全屏，相当于左右两个div的宽度width值固定，中间div的width值自适应。需要注意的是：

左边的盒子left使用左浮动，右边的盒子right使用右浮动中间的盒子不使用浮动；
左边和右边的两个盒子width为固定值，使用33%，中间的盒子width为auto；

#left{
    float:left;
    width: 33%;
    height: 100%;
}
#right{
    float:right;
    width: 33%;
    height: 100%;
}
#middle{
    height: 100%;
    width：auto;
}

横排铺满全屏需要特别注意的是，在html的书写过程中，一定要将middle放在最后，如：

<div class="footer">
    <div id="left" ><p onclick="changeWhite()">蓝色部分</p></div>
    <div id="right" ><p onclick="changeRed()">黑色部分</p></div>
    <div id="middle" ><p onclick="changeBlack()">白色部分</p></div>
</div>

这是因为，浮动后的盒子left以及right已经脱离了文档流，left左浮动且设置了固定width，middle宽度auto，所以middle会把left没有用完的那一行占满，而right会右浮动另起一行，大致是这个样子：具体可以参考：三个div 两边固定大小中间自动大小 - 小Pdiadia的博客 - CSDN博客
在这里插入图片描述
此外，中间尝试过将left、middle、right三个div设置dispaly:inline-block，但是这样的话虽然是横排铺满了全屏，但是中间留有小缝隙，参考如何消除inline-block产生的元素间空隙 - 亚洲黑色卍 - 博客园这篇文章，虽然解决了缝隙问题，但是又回到了最开始的那样，缝隙都留在了最右边，仍不能满足要求。

3. 实现交互

实现交互，主要是使用
document.getElementById("idName").style.background="colorName";或者
document.getElementById("idName").style.background=function();
然后通过在标签中设置onclick属性调用修改其他div背景颜色的函数。
但是，在实现的过程中，onclick失效，遇到了Uncaught TypeError: Cannot read property 'style' of null这个错误，找了一些文章：

找了好长时间才发现原来之前的div是只定义了类名，没有定义id名，所以使用getElementById肯定不对;
然后我又将getElementById修改为getElementsByClassName(注意Element后面有s)因为这样修改改动比较小，但是还是出错，Uncaught TypeError: Cannot set property 'background' of undefined，也就是说getElementsByClassName不能设置background属性，只好乖乖地把div类名都改成了id名
最后参考了一个可以随机产生颜色的文章：js几种生成随机颜色方法 - li_han - 博客园

function bg1(){
    return '#'+Math.floor(Math.random()*256).toString(10);
}
function bg2(){
    return '#'+Math.floor(Math.random()*0xffffff).toString(16);
}
function bg3(){
    var r=Math.floor(Math.random()*256);
    var g=Math.floor(Math.random()*256);
    var b=Math.floor(Math.random()*256);
    return "rgb("+r+','+g+','+b+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
}

三、实现代码

最后附上这次练习的全部代码，代码如下：

<!--html-->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="layout.css">
   
</head>
<body>
    <div class="header">
        <div id="rpart" ><p onclick="changeYellow()">红色部分</p></div>
    </div>
    <div class="middle1">
        <div id="gpart" ><p onclick="changeBlue()">黄色部分</p></div>
    </div>
    <div class="footer">
        <div id="left" ><p onclick="changeWhite()">蓝色部分</p></div>
        <div id="right" ><p onclick="changeRed()">黑色部分</p></div>
        <div id="middle" ><p onclick="changeBlack()">白色部分</p></div>
    </div>
    <script type="text/javascript" src="layout.js"></script>
</body>
</html>

/*layout.css*/
* {margin:0; padding:0;}
#rpart{background-color: red;}
#gpart{background-color: yellow;}
#left{background-color: blue;}
#middle{background-color: white;}
#right{background-color: black;}

div.header{
    width: 100%;
    height:250px;
    line-height: 250px;
    text-align: center;
    font-size:20px;

    position :absolute;
}
div.middle1{
    width:100%;
    height:auto;
    text-align: center;
    line-height: 250px; 
    font-size:20px;

    position :absolute;
    top:250px;
    bottom:200px;
}
div.footer{
    width:100%;
    height :200px;
    line-height: 200px;
    text-align: center;
    font-size:20px;

    position: absolute;
    bottom:0; 
}

#rpart,#gpart{
    width: 100%;
    height: 100%;
}
#left{
    float:left;
    width: 33%;
    height: 100%;
}
#right{
    float:right;
    width: 33%;
    height: 100%;
}
#middle{
    height: 100%;
    width :auto;
}

//layout.js
function changeYellow(){
    document.getElementById("gpart").style.background=bg1();
}
function changeBlue(){
    document.getElementById("left").style.background=bg1();
}
function changeWhite(){
    document.getElementById("middle").style.background=bg1();
}
function changeBlack(){
    document.getElementById("right").style.background=bg1();
}
function changeRed(){
    document.getElementById("rpart").style.background=bg1();
}
function bg1(){
    return '#'+Math.floor(Math.random()*0xffffff).toString(16);
}

Reference

ch206265

关注

5
点赞
踩
28

收藏

觉得还不错? 一键收藏
0
评论
div三行或三列铺满全屏

这里写自定义目录标题一、实现要求二、实现过程1、字体水平居中和垂直居中一、实现要求铺满屏，字体居中交互，点击一个盒子能够改变另外一个盒子的颜色最开始的实现效果使这样的：但是有些问题：字体只有水平居中，没有垂直居中；第三行的盒子最右边没有铺满，并且，我理解的铺满全屏是指完全铺满，既没有剩余空白，也不会让内容一屏显示不完，也就是说要让屏幕右侧的滚动条和下面的滚动条消失，内容显示完...
复制链接

扫一扫

专栏目录