html - 为什么 100vh 不适用于 p 元素？-6ren

html - 为什么 100vh 不适用于 p 元素？

转载作者：太空宇宙更新时间：2023-11-04 11:48:42

24

4

我有一个侧边栏，我希望它适合浏览器高度。所以我使用了 100vh。

如果我删除了 p 元素(带有 background-text 类)，它确实有效。

	* {
		margin:0;
		padding:0;
	}

	body{
		overflow:hidden;
	}

	.wrapper>div{
		display:inline-block;
	}

	.sidebar{
		background-color:#4e4e4e;
		height:100vh;
		width:25%;
	}
	.picproperties{
		padding:30px 0px 0px 30px;
	}
	.background-text{
		display:block;
	}

	.returnbar{
		height:25px;
		background-color:#5a5a5a;
	}


	.workspace{
		height:100vh;
		width:75%;
		background-color:red;
		
	}

<body>
	<div class="wrapper">
		<div class="sidebar">
			<div class="returnbar">
				<div class="returnbtn"></div>
			</div>
			<div class="picproperties">
				<div class="pp-background">
					
				</div>
				<div class="pp-ratio">
				</div>
				<div class="pp-patterns">
				</div>
			</div>
			<div class="imgproperties">
				<div class="ip-layers">
				</div>
				<div class="ip-image">
				</div>
			</div>
		</div><!--
		--><div class="workspace">
		
		</div>
	</div>
</body>

但是当我保留 p 元素时它不起作用

	* {
		margin:0;
		padding:0;
	}

	body{
		overflow:hidden;
	}

	.wrapper>div{
		display:inline-block;
	}

	.sidebar{
		background-color:#4e4e4e;
		height:100vh;
		width:25%;
	}
	.picproperties{
		padding:30px 0px 0px 30px;
	}
	.background-text{
		display:block;
	}

	.returnbar{
		height:25px;
		background-color:#5a5a5a;
	}


	.workspace{
		height:100vh;
		width:75%;
		background-color:red;
		
	}

<body>
	<div class="wrapper">
		<div class="sidebar">
			<div class="returnbar">
				<div class="returnbtn"></div>
			</div>
			<div class="picproperties">
				<div class="pp-background">
					<p class="background-text">Background :</p>
				</div>
				<div class="pp-ratio">
				</div>
				<div class="pp-patterns">
				</div>
			</div>
			<div class="imgproperties">
				<div class="ip-layers">
				</div>
				<div class="ip-image">
				</div>
			</div>
		</div><!--
		--><div class="workspace">
		
		</div>
	</div>
</body>

我怎样才能保留 p 元素并仍然使侧边栏适合浏览器屏幕高度(抱歉我的英语不好)。

最佳答案

如果您将 float:left 添加到侧边栏，它会起作用:

	* {
		margin:0;
		padding:0;
	}

	body{
		overflow:hidden;
	}

	.wrapper>div{
		display:inline-block;
	}

	.sidebar{
		background-color:#4e4e4e;
		height:100vh;
		width:25%;
      
       float:left;
	}
	.picproperties{
		padding:30px 0px 0px 30px;
	}
	.background-text{
		display:block;
	}

	.returnbar{
		height:25px;
		background-color:#5a5a5a;
	}


	.workspace{
		height:100vh;
		width:75%;
		background-color:red;
		
	}

<body>
	<div class="wrapper">
		<div class="sidebar">
			<div class="returnbar">
				<div class="returnbtn"></div>
			</div>
			<div class="picproperties">
				<div class="pp-background">
					<p class="background-text">Background :</p>
				</div>
				<div class="pp-ratio">
				</div>
				<div class="pp-patterns">
				</div>
			</div>
			<div class="imgproperties">
				<div class="ip-layers">
				</div>
				<div class="ip-image">
				</div>
			</div>
		</div><!--
		--><div class="workspace">
		
		</div>
	</div>
</body>

有关 css 设计原则的概述，请查看 this !!

关于html - 为什么 100vh 不适用于 p 元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30798110/

24

4

0

文章推荐： c++ - 重载+运算符，链表

文章推荐： linux - 可以在 curl 配置文件中使用 GET 和 POST

文章推荐： C++ 模板右值 Ctor 与 Const 引用 Ctor

html - 需要一个固定的导航栏和包含导航栏高度的登录页面 VH
我正在制作我的第一个作品集，但在做两件事时遇到了一些麻烦。创建一个固定的导航栏。当我使用 position: fixed;它清除了我在右侧“联系我”上的 float ，一切都崩溃了。在我的示例中，我
Javascript 向下滚动 vh
如果我想使用这个 JavaScript 命令: window.scrollBy(0,50); 它向下滚动页面 50px。是否有一个简单的相当于向下滚动页面 50vh 的方法？这行不通 window.
css - vh/% 单位和移动设备上的键盘
我对像 vh/% 这样的高度单位有疑问。当任何 input 处于事件状态时，移动设备上的键盘会更改元素高度。我正在寻找在键盘处于事件状态时将其更改为静态高度的解决方案。 jsfiddle (在移动设备
html - 如何使用 VH 制作响应式英雄背景图片？
:) 我有一个响应式标题。这是英雄部分的代码: .hero { background: url(../../img/hero.jpg); background-size: cover
css - 不一致的 vh 单元行为
我有一个在悬停时出现的伪元素: height: 0.4vh; 高度不会改变，只有宽度会改变。然而，出于某种原因，在某些条件下，不同伪元素的高度不同(此处的两条较暗的线都有 height: 0.4vh)
Css 查询来替换类似 "vh"查询的东西
我最近发现自己弄乱了“vh”css:它似乎很有效，但我知道大多数旧浏览器都不支持它。我想知道是否有人可以启发我对此的任何替代方案:我知道 @media 查询的存在，但我不知道它们如何帮助我解决我的问题
javascript - 根据 vh 将垂直元素对齐到所有分辨率
我有一些元素作为图层工作(所有元素都是绝对定位的并且带有 z-index)。主要的问题是，我有一张图片应该放在我的视口(viewport)高度 (vh) 的底部 0 我已经尝试过底部定位、垂直对齐
html - 使用 vh 对齐的问题
我实际上是在尝试创建一个导航栏。但是我希望它大约为 7vh，并且我希望字体可以随之调整。问题是小的悬停效果边框不会一直完美对齐(全屏显示)。如果有人知道如何解决这个问题，我们将不胜感激。 * {
css - 如何使用 vh 制作页眉背景图片？
我对 CSS 非常陌生，我正在通过教程构建我的第一个网站。无论出于何种原因，我的标题背景图片都不会加载。我仔细检查了我的图像路径。我试过从类似问题中复制和粘贴代码，但似乎没有任何效果。这是代码。 h
html - CSS - vh 有效而百分比无效
这个问题在这里已经有了答案: How to set a percentage height value in HTML/CSS (7 个答案) 关闭 4 年前。
html - 如何保留 VH 布局的部分？
我正在尝试实现以下布局(图 1)，其想法是根据屏幕(台式机和笔记本电脑屏幕)保持相同的结构和比例但是，在我当前的代码中，它在台式机上看起来不错，但我不知道在不更改布局的情况下保留笔记本电脑屏幕中元素
javascript - 如何以像素为单位降低 VH 的值？
代码 JS: var windowheight = $(window).outerHeight(); var meniu= $('.navbar-fixed-top').outerHeight()
javascript - 如何补偿滚动时android移动浏览器的隐藏地址栏？如何在所有浏览器中正确测量 'vh'？
有没有一种方法/jQuery 方法可以单独测量视口(viewport)高度？本地址栏显示时一个 vh，本地址栏隐藏时另一个 vh？ var vhAdBarPresent = $(window).he
javascript - 如何将以 vh 给出的元素的高度转换为像素？
我将一个元素的最大高度设置为 65vh。我需要在我的 JavaScript 中将它转换为像素，以查看图像是否适合那里，或者我是否需要缩小/裁剪它。 (正在做 win8 App 开发)。这行得通吗？
css - 使用 vh 的布局不随缩放缩放
我试图创建一个仅使用 vh 大小的登录表单。这样做是希望整个表单能够根据视口(viewport)进行缩放。没有!出于某种原因放大，在输入字段和下面的文本之间会创建一个空白区域，该空白区域会随着放大程
css - vh 单位的最小值/最大值是多少？
例如，浏览器有哪些限制？如果我有 99999999999999 vh，它实际上是 99999999999999 vh 还是像 2145629vh 这样奇怪的东西？最佳答案从视口(viewport)
javascript - CSS:是否有一个单位等同于 vh + vw？
我想知道是否有一个字体大小单位可以测量页面宽度和高度的 1%？我认为这会让我更容易，并帮助我做我想做的事情，而不必使用 JavaScript(尽管任何答案都是可以接受的，只要它有效)。如果没有这样的单
html - 使用 CSS vh 单位和百分比时不显示内容
当使用 CSS vh 和百分比定义元素(例如 div)的高度时，如果内容溢出元素，元素是否会拉伸(stretch)。在我的笔中，我正在尝试为底部的 div(其 ID 为 contact)填写内容。但
html - 当父元素高度设置为 vh 时，内部内容和滚动条被兄弟元素的高度截断
我正在尝试创建一个占视口(viewport)固定百分比的侧边栏。在侧边栏内，我想要一个固定在顶部的元素，而如果其他内容占用的垂直空间大于侧边栏高度，则它会滚动。在此示例中，h1 元素保留在父元素的顶
html - CSS 中的 vh 和百分比？
我正在尝试让 .navbar 占据屏幕的一半，但它没有正确显示。我不确定为什么？我猜还有另一个容器，但我不确定为什么？我将 body 设置为 100vh 以覆盖屏幕我有 .navbar 一半使用百

首页

博学

6Ren·AI

商城

html - 为什么 100vh 不适用于 p 元素？