前端学习笔记 // 设置背景颜色铺满页面以及去掉页面滚动条

最新推荐文章于 2023-04-26 13:11:32 发布
最新推荐文章于 2023-04-26 13:11:32 发布
阅读量949 收藏 3
点赞数
分类专栏： 前端 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45805420/article/details/104987060
版权
本文是前端学习笔记，介绍了如何使用CSS设置背景颜色铺满整个页面，并去除页面滚动条。通过设置height:100%并确保所有父元素高度有有效值，实现背景全屏。同时，利用margin、padding和overflow属性来隐藏滚动条。
摘要由CSDN通过智能技术生成

1.设置背景颜色铺满页面

该点可参考以下文章：
css如何让height:100%起作用？

简单来说，就是如果你想让一个元素铺满页面，既设置 height:100%，那么你需要给这个元素的所有父元素的高度都设定一个有效值。因为浏览器在根据百分比来计算一个元素的高度时，需要先获取其父元素的高度，进而计算该元素的高度。

<head>
	<style>
	html,body{
   
		width: 100%;
		height: 100%;
最低0.47元/天 解锁文章
Ga1axy_z
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
大前端学习笔记--持续随缘更新
JackieDYH的博客
02-10 1193
目录 0210--前端知识&HTML常用标签 0210--前端知识&HTML常用标签 1、浏览器及内核介绍： chrome谷歌： 特点——简洁、快速、安全 内核——webkit,Blink 费用——收费 Firefox火狐——Mozilla公司： 特点——非盈利、Gecko项目开源 内核——Gecko Safari苹果——苹果...
CSS学习笔记
怀抱清风的博客
03-22 1774
CSS学习大纲: 学会使用CSS选择器 熟记CSS样式和外观属性 熟练掌握CSS各种选择器 熟练掌握CSS各种选择器 熟练掌握CSS三种显示模式 熟练掌握CSS背景属性 熟练掌握CSS三大特性 熟练掌握CSS盒子模型 熟练掌握CSS浮动 10.熟练掌握CSS定位 11.熟练掌握CSS高级技巧强化CSS typora-cop...
VScode如何实现页面背景图固定不动，不跟随滚动条滚动？
A_4201314的博客
09-23 3296
代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
解决div出现横向滚动条，背景色没铺满问题
weixin_34109408的博客
03-21 4734
问题描述（如图）：div等块级元素默认宽度为100%，当页面渲染完后其宽度已经固定，这时候如果文字超出其宽度（如调用api后显示的结果），我们如果希望其出现滚动条，这时超过原宽度的部分背景可能跟文字背景不一样。如图：1，初始情况 2，点击菜单后出现的文字长度超出原div宽度，出现了滚动条（注意设置overflow: scroll才会出现滚...
网页铺满全屏，不需滚动条的设置方法
三生石
06-20 1万+
通常设置width = 100%有用。但高度却没用。 需要给body，html设置了height：100%才能做出铺满全屏的效果。 html,body{ width:100%; height:100%; margin:0; padding:0; overflow: hidden; } .id{ width:100%; height:100%; bac
去掉按钮阴影的方法和消除表格加背景颜色后出现的缝隙
萝卜@兔子的专栏
08-19 1758
1、去掉按钮阴影的方法    .btn { border:none;}2、消除表格加背景颜色后出现的缝隙 table{ border-collapse:collapse;}border-collapse 设置 table 是分开的边框还是合并起来。table 默认的样式是分开的边框，table 和里面 th、td 的边框之间有缝隙。而设置 de style="font-family: monosp
让微信小程序页面隐藏滚动条
Julie_Go的专栏
06-04 4072
需求是隐藏页面的纵向滚动条 小程序提供了视图容器scroll-view ，可滚动视图区域。
HTML和CSS学习笔记
clownwithoutmask的博客
10-19 389
Hyper Text Markup Language超文本标记语言（一种做网站编程语言）超文本：文本内容+非文本内容标记：有单标签和双标签之分语言：编程语言HTML负责编写网页的结构。
HTML&CSS学习笔记 纯知识点版 (尚硅谷2019李立超版)
LiuKairui的博客
09-08 7704
此版为纯知识点无练习笔记版本 目录1. HTML基础1.1 网页的结构1.2 HTML中的"实体"1.3 meta 标签1.4 语义化标签1.7 列表1.8 超链接1.9 图1.10 内联框架1.11 音视频2. CSS基础2.1 CSS简介2.2 CSS基本语法2.3 CSS 选择器基础2.4 CSS的复合选择器2.5 关系选择器2.6 属性选择器2.7 伪类选择器2.8 `a`元素的伪类选择器2.9 伪元素选择器2.10 样式的继承2.11 样式的冲突与优先级问题2.12 长度单位2.13 颜色单位3
web前端 全屏滚动
12-27
web前端 全屏滚动
html怎么防止左边溢出,【CSS】居中的内容，设置overflow-x:auto后，左边溢出元素的内容将无法通过滚动条显示，如何解决？...
weixin_42511121的博客
06-03 1295
1 问题描述：如图所示：电子邮箱本应该是abcdefghijklmnopqrstuvwxyzabcdefg@123.com，但是设置该元素为overflow-x:auto后，滚动条无法显示邮箱的全部内容。设置overflow-x:visible后，显示的内容如下：2 主要代码：包裹文字的元素是div。html代码如下：:class="table.tableHead[7].headClass"v-s...
css 背景颜色怎么铺满整个页面？
weixin_42220130的博客
08-28 1314
给外面盒子一个最小高度为(100vh)整个屏幕 .box{background: linear-gradient(90deg,#45b26e,#77c68d); min-height: 100vh;}
html背景覆盖整个页面,html – CSS背景颜色不完整,它没有正确覆盖整个页面
weixin_39961943的博客
06-04 1198
我正在尝试为我的页面添加背景颜色,但它没有正确覆盖整个页面.CSS代码#background{background-color:#9B59B6;margin: -19px 0 0 0; /*-19px here to remove white space on the very top of the page*/width: 100%;}如果我添加：position:absolute;height...
HTML/CSS设置网页背景
热门推荐
夏日漱石的博客
03-12 2万+
HTML/CSS设置网页背景
使用overflow，导致页面在苹果端右边出现背景色1px细线
最新发布
yanchuh的博客
04-26 254
里面的主体白色块区域，是自己写的，在构建底部半圆形的缺口时，在苹果手机上测试的时候，右侧缺口处出现1px左右的细线问题，在将代码一个个注释，再运行，我发现由于我在标题向下挪动的时候为了使内部第一个盒子的margin-top生效，我在最大的白盒子上添加了overflow：hidden，用来构建bfc，在将overflow注释掉后，细线问题解决。最近在做一个抖音里分享付费的一个简单的移动端页面。
滚动条滚动后，背景颜色铺满
qq_35132189的博客
05-10 2433
解决方法： 1：在外层元素加入css样式 min-width:max-content; min-width:-webkit-max-content; 案例一： <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style> ...
学习前端css样式遇到的一个背景颜色问题记录
技术刚刚好
03-14 658
css主要是用来控制网页显示样式的效果，纯html显示出来的很单调，跟黑白电视一样不好看，所以就有了css样式来决定网页显示的效果。最近在学习css的时候遇到一个背景颜色设置的问题，今天在这里小记一下方便以后查找。 样式设置了一个背景颜色，但是显示的高度不够，只是为什么了？我猜测应该是背景这一层是靠内部的元素来支撑背景的高度，实际第一层的高度没有那么高。所以直接设置背景颜色是不行的，既...
前端学习之如何让某个元素充满整个页面
qf2019的博客
07-15 555
在前端开发技术中，我们经常会遇到这样的问题太，就是想让一个元素充满整个页面，就像是我们在前端培训练习做网站或者app的登录页面的时候通常会遇到这样的问题，有时候我们在前端培训项目中做这样的登录界面时通过给元素设置height:100%结果是无效的。问前端学习老师才知道缺少了一点东西。下面就给大家介绍一下。 方法： html,body{height:100%;margin:0;} #test{height:100%;} 首先我们要定义一下页面的html和body标签，然后在去定义元素的标签属性，这样才可以实现
Java Web前端学习笔记：HTML到AJAX基础
"这篇文档包含了作者在学习Java Web前端时的笔记，主要涵盖了前端开发的基础知识，包括HTML、CSS、JavaScript、DOM编程、jQuery框架以及AJAX基础。" 本文档详细介绍了Java Web前端开发中的核心技术和元素，首先从...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值