CSS 100%高度,填充/边距
在CSS中，要使一个元素的高度为100%，可以使用高度属性height。然而，在某些情况下，需要确保父元素也具有明确的高度。以下是一些建议来实现100%高度以及填充和边距的设置。
- 确保HTML和BODY元素具有100%的高度：
html, body {
height: 100%;
margin: 0;
padding: 0;
}- 为您要设置100%高度的元素设置高度：
.element {
height: 100%;
}- 设置填充和边距：
.element {
padding: 20px; /* 设置填充为20像素 */
margin: 10px; /* 设置边距为10像素 */
}- 使用Flexbox布局：
.parent {
display: flex;
flex-direction: column;
}
.child {
flex-grow: 1; /* 允许子元素填充可用空间 */
}- 使用Grid布局：
.parent {
display: grid;
grid-template-rows: 1fr; /* 创建一个1行的网格，其中1fr表示剩余可用空间 */
}请注意，这些方法可能需要根据您的页面结构和需求进行调整。在实际应用中，请确保您了解这些技术的兼容性和浏览器支持情况。
相关·内容
1回答
跨浏览器兼容的CSS liquid布局，具有3列100%宽/高
css、layout、html
我开始基于文章创建我的HTML/CSS布局，并或多或少地成功了。然而，我认为我的css搞砸了，因为这个页面在IE或Chrome/Firefox中的显示方式不同……这是我的布局草图您可以查看我当前的结果。我不相信IE正确地呈现了我的CSS，相反，我认为我的CSS做错了什么，
浏览 0提问于2012-07-12得票数 0
回答已采纳
3回答
如何使用javascript获得动态变化的div的高度？
javascript、html
有使用javascript获取动态div高度的方法吗?我有一个动态div，它是动态填充的，我想知道div每次的高度。有人能帮我弄清楚吗？
浏览 6提问于2013-10-25得票数 3
回答已采纳
15回答
使用HTML/CSS，如何使元素的宽度和/或高度达到其父元素的100%，并且仍然具有适当的填充或边距？所谓“适当”，我的意思是，如果我的父元素是200px tall，并且我用padding = 5px指定了height = 100%，那么我希望我应该得到一个190px高元素，在所有方面都有border，所以显而易见的答案是行不通的： width: 100%
height: 100%
浏览 32提问于2009-01-27得票数 873
回答已采纳
2回答
CSS outlook图像问题
html、css、outlook
我的问题是，在桌面上的图像上，tr img有一个填充，我似乎不能100%拉伸它的宽度和高度，没有填充，没有边距。这个问题只发生在outlook上，我在上面添加了一些css，如hspace和vspace为0，填充0和边距0，并尝试显示块和对齐，它似乎不起作用。
有什么想法吗，伙计们？此外，在添加height="100%"或在style="height:100%&
浏览 2提问于2017-10-27得票数 0
4回答
当您有两个CSS文件时，如何覆盖某些条件？
css、stylesheet、overwrite
我有一个名为main.css的css文件(由于常见的css样式在每个页面上都使用它)和另一个名为about.css的css文件(它保存了about.html特有的样式)。在main.css上，我有这个css块： margin: 0px; height: 100%;这在about.html在about.css中，我能做什么使页面上的html、
浏览 1提问于2013-08-19得票数 1
回答已采纳
1回答
用CSS设置块元素的真(偏移)宽/高？
html、block、css
在CSS中设置宽度/高度只对应于内容区域。是否有办法在CSS中设置元素的偏移宽度/高度(即尺寸，包括填充/边距/边框)？我使用css类"smallBox“标记了许多div。.smallBox{height: 100px;现在，我想在每个盒子上分别设置填充，而整体外部尺寸保持不变。
浏览 2提问于2010-11-11得票数 1
回答已采纳
1回答
呈现内容之前的页脚问题
css、angular、flexbox
嗯，我尝试了很多可能的解决方案和方法(使用柔性盒，位置等)。在呈现容器组件之前，我不能将页脚组件放在底部。我有一个旋转加载器，可以观察异步数据，下面是页脚。所以很难看的看着脚和旋转手在一起。我想把我的脚总是在底部(不是固定的)，而不是可见的。我一直在阅读和测试-> ，但是没有一个解决方案。<app-header></app-header><app-footer></app-footer>
// fo
浏览 2提问于2018-12-08得票数 0
回答已采纳
1回答
如何扩展HTML5视频以触摸左/右边缘？
html、css、responsive-design、html5-video
我能够插入一个HTML5视频并使其响应(width="100%")。然而，我想让它接触到两边，就像这个网站：谢谢。
浏览 1提问于2013-07-15得票数 0
回答已采纳
2回答
为什么这是错误的？关于底部的页脚
css、footer
body { margin:0; height:100%;}
padding-bottom:20px;
position:absolute; width:
浏览 0提问于2011-10-16得票数 0
回答已采纳
4回答
它也没有达到预期的高度
html、css、responsive-design
然而，每当我对流体div中的段落应用边距顶时，它不会填充div的整个高度，也会将固定的div推到它旁边。p class="withMargin">Test</p> -background-color: yellow;height: 100%;}
background-color: pink;
height: 1
浏览 7提问于2014-05-05得票数 0
回答已采纳
2回答
笔记型电脑与台式电脑
css、layout
HTML
@charset "UTF-8"；*{框-大小:边框；边距:0 0px；填充:0 0px；字体: Verdana，Arial，Helvetica，sans-serif；} background-image/ #firstColumn{宽度:230 5px；高度:250 5px；浮点数:左；填充-左:65 5px；边距-顶:100 5px；文本对齐:中间；字体大小:24 5px；}#第
浏览 4提问于2014-11-17得票数 0
回答已采纳
2回答
HTML元素高度，包括边距和子边距
javascript、html、css
我可以得到一个元素的高度但这是没有余地的。我可以使用的函数得到包括边距在内的高度。但是，如果我有一个比父元素更大的子元素，那么这个函数就不能给我我想要的高度。如何获得元素的高度，包括元素和子元素的边距？相关示例：<div id="outer"> <p>
N
浏览 0提问于2018-09-04得票数 3
回答已采纳
2回答
让我感到困惑的代码是第347页上的练习(剪切、复制、粘贴)：对于我(使用Chrome)，它返回424px。然而，当我把各个元素的内容区域的高度加起来时，我似乎不能得到这个数字。
浏览 1提问于2016-05-19得票数 0
4回答
使用JS CSS应用减顶边距
javascript、jquery、html、css
我正在使用JavaScript计算元素的高度，然后将该高度作为填充顶应用于另一个元素，如下所示： $("#page .topSection").css("padding-top", p
浏览 8提问于2014-08-26得票数 0
回答已采纳
1回答
如何使用JQuery将一个元素的高度添加到另一个元素的顶部边缘
jquery、header、margin、nav、parseint
它的高度没有在css中显式定义(它是通过字体大小、填充等来创建的)。<sc
浏览 0提问于2013-07-28得票数 0
3回答
如何在没有泄漏的情况下设置<div>高度？
html、css
我试过最小高度: 100%，高度:calc(100 of 50 Of)，但这些都不起作用。到目前为止我拥有的我怎么才能摆脱它？ background-color: #fff; width: 1000px; margin: 0px; background-color: #c0c0c0;
浏览 1提问于2019-07-05得票数 0
回答已采纳
15回答
正文高度100%显示垂直滚动条
html、css
出于好奇，考虑到下面的例子，为什么#container div上的页边距会导致浏览器中出现一个垂直滚动条？容器的高度比设置为100%的主体高度小得多。我已经将#容器之外的所有元素的填充和边距设置为0。请注意，我故意省略了#container div上的绝对位置。在这种情况下，浏览器如何计算主体的高度，边距对其有何影响？<html>
<h
浏览 35提问于2012-10-20得票数 100
回答已采纳
2回答
设置<div>元素的宽度和高度为100px；填充、边距和边框设置为0px；为什么它仍然偏移量？
javascript、jquery、html、css
我已经将div元素设置为具有一些css规则。它的宽度和高度都是100px。它还将填充、边框和边距设置为0px。什么CSS默认告诉代码从浏览器窗口的边缘偏移10px左右的元素？我知道我的css样式是有效的，因为第一个样式正下方的除法由于零边距而接触到它。
浏览 1提问于2015-10-15得票数 0
3回答
内容和页脚空间问题
php、javascript、css、html
我不知道为什么content-bottom和footer之间的间距比header和content-top之间的间距要大。你可以在这里看到一个例子:没有找到。我希望相同的内容(框)的标题和footer...but之间的间距总是我得到更大的间距之间的内容和footer..and我不知道如何解决它，请帮帮我。
浏览 0提问于2011-06-23得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
