CSS:textarea的高度占视口高度的百分比
在CSS中，可以使用vh单位来表示视口高度的百分比。要将textarea的高度设置为视口高度的百分比，可以使用以下代码：
textarea {
height: 50vh; /* 设置高度为视口高度的50% */
}在这个例子中，textarea的高度将占据视口高度的50%。您可以根据需要更改50vh的值。
相关·内容
3回答
如何在HTML中设置字体，以便在展开窗口时，文本的大小也随之增大。有点像为文本设置一个百分比，该百分比将占文本所在框大小的百分比。
下面是我希望发生的事情的一个例子：
#box #text {
font-size: 50%;
}
现在假设#box是200px，#text应该是100px。显然，我不能仅仅为#text设置一个固定宽度，因为在站点中，#box将是一个动态宽度。
浏览 2提问于2011-06-02得票数 8
回答已采纳
1回答
我有以下问题:我正在用javascript编写一个游戏，我希望它是resposnive。游戏的场地是一个正方形，其中包含25个较小的正方形。
现在我希望我的站点是响应式的，并且正方形的高度等于他的宽度。
我试着在%属性中这样做，但没有成功。
下面您可以看到应该具有这些属性的类。
.standart {
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
width: 5.21%;
height: 9.26%;
background: blu
浏览 2提问于2019-04-24得票数 0
我刚刚了解到一个新的和不常见的CSS单元。vh和vw分别测量视口的高度和宽度百分比。
我从堆栈溢出的角度看了这个问题，但它使这些单元看起来更加相似。
答案明确地说
vw和vh分别占窗口宽度和高度的百分比:100 vw是宽度的100%，80 vw是80%等等。
这似乎与%单元完全相同，后者更常见。
在开发工具中，我尝试将值从vw/vh更改为%，反之亦然，得到了相同的结果。
这两者有什么区别吗？如果没有，为什么将这些新单元引入CSS3？
浏览 6提问于2015-06-25得票数 223
回答已采纳
2回答
我正在使用bootstrap。在这里，我使用了网格系统，如以下代码片段所示： <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="background-color: aliceblue;">
<div class="col-lg">
First
浏览 19提问于2020-08-20得票数 0
回答已采纳
当我打开一个页面时，我想要获得完全高度的背景图像。
我还没有开始使用jQuery，所以如果您可以帮助我使用基本js的话。这是我目前尝试过的，但没有起作用。
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<script type="text/javascri
浏览 4提问于2015-08-11得票数 1
回答已采纳
1回答
我有一个ul，我已经传播了大量的图像。大多数情况下，图像数量足够多，因此需要滚动条。在图像与类似的ul之间存在拖放交互。两个ul都需要在屏幕上可见，所以我需要滚动条。这是我手动设置的，下面是ul的CSS： border: 2px solid black;
height: 70%;
list-style-type: none;
overflow-y: scroll; 我希望高度为屏幕的70%，但如果使用%，ul就会扩展到屏幕之外，浏览器本身就会获得滚动条。我将overflow-y设置为强制滚动条，但它不会改变行为。 我使用bootstrap grid来调整元素的大小。我需要这个ul可以和其他页
浏览 16提问于2019-04-12得票数 1
回答已采纳
我需要使用css样式，如最大宽度:90%和最大高度:90%来定义图像大小，而不是溢出窗口。然而，这在Safari上工作得很好，但在Chrome上就不行了。这是我在jsfiddle上写的演示：
<style>
div{
padding: 0;
margin: 0;
}
.slide{
text-align:center;
background-size: 100% 100%;
}
.user-img{
max-height: 80%;
max-width: 90%;
}
</style>
<body>
浏览 1提问于2015-01-17得票数 13
回答已采纳
1回答
我正在尝试显示两个div，一个在另一个上面，每个都占屏幕高度的一半
<ion-view view-title="Locator">
<ion-content data-tap-disabled="true" scroll="false">
<div class="container">
<div class="contained">
<ui-gmap-google-map center='map.c
浏览 0提问于2016-01-13得票数 4
回答已采纳
1回答
我正在做一个portfoilo-building项目，我有一个包含5个图像的组件。我希望图像的高度和宽度为屏幕宽度的1/5。我如何才能做到这一点呢？
class TopPictures extends React.Component {
render() {
const imagestyle = {
height: "200px", //this is wrong
width: "200px",
};
return(
<div>
<img src = {ima
浏览 6提问于2020-05-11得票数 0
回答已采纳
1回答
因此，我试图构建一个纯CSS响应方(实际上，我试图构建一个圆圈，但一旦我得到了这个方块，那就很容易了)。
换言之：
我想要一个div，它的height占body的百分比，width等于这个百分比(反之亦然)。
div还需要有另一个div，它可以包含内容和overflow: auto。
最后，div永远不能超过body或viewport的height (或width)。
到目前为止，我已经找到了一些部分工作的解决方案(例如，在portrait中，而不是在landscape中)，使用1px透明.gif作为img来填充包装器div。不太理想的语义，但我看不出没有它是怎么做到的。
浏览 8提问于2013-05-09得票数 3
回答已采纳
2回答
在这个设置中
<div class="a">
</div>
.a {
width: 400px;
height: 600px;
}
如果屏幕分辨率是1600*1200，那么div的宽度会是浏览器中屏幕的25%吗？如果屏幕分辨率是4000*2400，那么div的宽度会是浏览器中屏幕的10%吗?
我想永远都是25%。
如果使用百分比设置宽度，则当浏览器不在全屏时，div将自动缩小。
浏览 1提问于2020-02-15得票数 1
我有css代码来做布局。我有基本的页眉面板，页脚，左面板和中央面板。我想让左边的面板和中间的面板自动伸展到底部(蓝色和灰色的部分一直延伸到黑色页脚)。有没有办法做到这一点？以下是我的代码。
谢谢,
body {
text-align: center;
}
.wrapper {
position: relative;
width: 960px;
font-size: 0.9em;
margin: 0 auto -20px;
text-align: left;
}
.header {
height: 125px;
backg
浏览 0提问于2010-10-29得票数 0
回答已采纳
1回答
我刚刚做了一个响应式设计，但有两个错误。当窗口调整到不同的大小时，整个网站将自动调整大小，但标题标题和滑块不会调整大小。但如果我重新加载它，它会调整大小。
我已经制定了不同的css字体大小和滑块高度的规则，不重新加载就不起作用。你可以看到在线网站在：你看到滑块，改变窗口大小，然后你会看到一个问题，当重新加载网站时，看到所有的变化，我认为所有的but都在我的css上，但我不知道如何修复它。
P.S字体大小我试着用百分比来表示，但是字体太小了。
浏览 1提问于2013-01-14得票数 0
2回答
我想要一个在页面顶部居中的导航栏，而且我希望宽度比屏幕宽度小80px。有没有办法用纯CSS，不用javascript来做到这一点？我以前见过这样做，但我当时并没有费心去检查源代码。
浏览 2提问于2012-09-02得票数 1
回答已采纳
在模拟器上，文本看起来没问题，但在我的手机上，它太大了。
<label text="just some regular text" class="text"> </label>
.text{
font-size: 20%;
}
浏览 4提问于2020-01-08得票数 3
1回答
我试图使嵌入式视频调整大小，同时保持其纵横比。(在这种情况下是16:9)
我在这个网站上找到了一个解决方案：
正如您所看到的，视频(我正在使用的视频是vimeo)在用户调整窗口大小的同时被很好地调整了大小。但是，我无法让它使用这个Javascript代码。我熟悉HTML和CSS，但我是Javascript的新手。
这里是我的HTML，我通常会使用外部CSS，但是这里我复制了我想要做的事情，并简化了它：
<!DOCTYPE html>
<html lang="EN" style="height: 100%;">
<head&g
浏览 2提问于2020-01-30得票数 0
回答已采纳
3回答
我正在尝试创建一个简单的页面，在一行上有一个标题，然后是一个有两列的行。每一列将包括一个文本区。我想让列和文本填充页面的其余部分。我一直在找，但我解决不了这个问题。我使用的是boostrap v4.0.0-beta.2。
下面是我的代码片段：
label { font-weight: bold; }
html, body, .container-fluid {
height: 100%;
min-height: 100%;
}
textarea.for
浏览 0提问于2017-11-15得票数 0
1回答
我有一个关于“圣杯”布局的扭曲，您会注意到#main有一个min-height: 800px。我真正要寻找的是100%的高度，然后当我在section中添加内容时，布局的其余部分会继续下去(就像它目前所做的那样)。
知道如何做到这一点，100%的高度和没有显式设置800 to？
body {
font: 24px Helvetica;
background: #999999;
margin: 0;
padding: 0;
height: 100%;
}
#main {
min-height: 800px;
margin: 0;
padding: 0;
浏览 2提问于2017-07-06得票数 3
回答已采纳
1回答
进行基于jQuery的平方调整。
、、、、
所以我有一个，每一个里都是一个正方形。现在
css中的宽度是基于百分比的，希望它响应。因此，我使用一个jQuery来获得与宽度相同的高度，使它们成为正方形。
然而，在调整大小时，只有宽度受到影响，高度保持在原来的负载值.有什么办法绕过这件事吗？
这是我的代码：
这是我的代码：
html：
浏览 4提问于2013-10-17得票数 0
回答已采纳
我有一个div，它的风格是style={{ width: '100%', height: '100%', overflow: "hidden" }}，但是在f12中div是100% by 0
div jsx组件：
return (
<div style={{ width: '100%', height: '100%', overflow: "hidden" }}>
{/* some code */}
</div>
)
App.css风格：
bo
浏览 4提问于2022-10-25得票数 -1
2回答
我一直试着用百分比来处理CSS中的流体布局，直到我在测试一些东西时遇到了这个问题，我才觉得自己有所进展。有了下面的代码，我有两个div，应该放在视图的外面，所以如果你滚动的话，你应该马上看到它们。
与左边边距对齐的那一个工作得很好，但是与上边对齐的div结果让我很不舒服。为了获得预期的结果，我必须将最高保证金设置为42%，我不知道这个数字是从哪里来的。我想这将是90% (100% -topbar的高度)，一开始我认为它可能与浏览器界面有关，但我的界面不可能是48%，而将浏览器放在全屏没有修复它。真正让我感兴趣的是，将导航的高度设置为90%，加上顶部的高度设置为10%，就像预期的那样，那么为什么
浏览 3提问于2013-05-24得票数 1
回答已采纳
我可以使用div中的高度百分比和overflow-y:在其中滚动吗？标记：
<div id="container">
<div class="messages_container">
<ol class="messages">
<li>sample message here</li>
<li>sample message here</li>
<li>sample message here</li>
</ol>
</div&
浏览 3提问于2012-07-16得票数 0
1回答
我正在自己学习RWD，我想出了一个想法，几乎在每个box/div/element中都使用1%的填充，这样网站看起来总是很智能，像素完美，响应迅速。然而，1%的填充是基于父元素的宽度，而不是主体的宽度。有什么方法可以解决这个问题吗？
浏览 1提问于2015-06-15得票数 1
在设置文本区域的行高时，我遇到了麻烦。我希望它始终与背景中的li元素保持相同的高度，因为当您调整屏幕大小时，文本会越过行进入新行，这看起来一点也不好。4.我一直在想办法解决这个问题，但一直想不通。li有一个height的5%，我需要line-height的textarea也是5%，但我需要这个百分比是基于ul的height，而不是content-wrapper的。有没有可能以某种方式实现这一点?请看下面的细节。
看看这张图(每一行都是一个li)：
它有这样的结构：
<main class="full-height">
<div id="
浏览 3提问于2015-01-07得票数 0
3回答
如何将css中的宽度和高度值分别指定为屏幕的宽度和高度。我尝试了下面的css，但现在为我工作。
.classname
{
height:100%;
width:100%;
}
编辑
我也使用Jquery代码作为
$("#PanelGrid").width = $(window).width();
但不起作用。
这是密码。
<table style="font-family: calibri; height: 100%;" border="0px" cellpadding="0" cellspacin
浏览 4提问于2012-12-05得票数 0
回答已采纳
我正在寻找一种解决方案，以自动调整所有文本的大小基于设备的大小，而不是明确指定为每个元素。例如:使用class="display-4“在移动和桌面上显示相同的字体大小。如何动态改变？
浏览 6提问于2020-10-20得票数 0
7回答
我尝试在CSS中将<div>设置为某个百分比的高度，但它只是与其中的内容保持相同的大小。但是，当我删除HTML5的<!DOCTYTPE html>时，它可以正常工作，<div>会根据需要占据整个页面。我想让页面进行验证，那么我应该怎么做？
我在<div>上有这个CSS，它的ID是page
#page {
padding: 10px;
background-color: white;
height: 90% !important;
}
浏览 1提问于2009-10-26得票数 200
回答已采纳
我正在寻找一个解决方案，如何绘制一个响应方，其中的高度将给予%。
<div class="square"></div>
//CSS
.square{
background: red;
height: 49%;
//and what else make this div square I found many solutions how to make it but it is dependent on width :(
}
viewport: <meta name="viewport" content="in
浏览 3提问于2015-10-29得票数 1
回答已采纳
我在建一个网站。
我可以让面板达到网站的全部高度。(顶部面板占页面的50%，底部占页面的50% )
我试过的是：
展示: Flex
身高: 100%
最小高度: 100%
我怎么才能解决这个问题？
浏览 4提问于2016-05-03得票数 0
回答已采纳
我用引导程序创建了这个页面，但是只有当我改变浏览器宽度的大小时，它才会响应。当我改变浏览器的高度时，它没有响应。我做错了什么？
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Demo</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css&#
浏览 1提问于2015-08-25得票数 0
回答已采纳
我正在做一个网站，我需要设置一个div的高度和宽度来覆盖整个浏览器视图区域，就像许多现代网站一样。但是，我不能简单地将其高度设置为100%，因为它的父元素是另一个div，其高度必须设置为大于浏览器窗口的。还有别的办法吗？
--类似于我的网站设置的代码示例。
HTML
<div class="entireThing">
<div class="contentBox">
</div>
<div class="contentBox">
</div>
</div>
浏览 2提问于2015-01-17得票数 5
回答已采纳
2回答
我正尝试在bootstrap中设置我的旋转木马的高度。如果我将高度设置为700px，在响应中旋转木马看起来就像垃圾一样。那么，我如何解决这个问题，让我的旋转木马在桌面和智能手机上看起来很好呢？合适的高度应该是多少？
浏览 2提问于2015-09-30得票数 0
我想将元素的宽度设置为观众监视器的本机分辨率的关系。
我理解CSS "width:100%;“的存在，但我对这种方法使布局变形的方式不满意，或者对于想要放大/缩小的观众来说，行为可能是令人沮丧的。
取而代之的是，我希望元素只在zoom=100%中表现为“宽度:100%”。这是可能的(使用CSS或Javascript)吗？
浏览 0提问于2016-02-08得票数 3
1回答
对于我正在进行的项目，我需要设计一个web应用程序，它的内容可以动态地调整手机、平板电脑和台式计算机的大小。
我已经有一段时间没有使用任何CSS了，我需要一些帮助，弄清楚我如何实现以下目标.
我需要屏幕的前65%是包含内容的一个元素/div。对于最后35%，我需要它是另一个元素/div，包含其他内容。
我需要帮助的是找出CSS代码，这样我就可以将内容保持在上面讨论的比例中(以前65%为中心，以底部35%为中心)，并在下面的图片中给出这样的例子。
特别是我有一个困难的时间弄清楚如何使一个div占用一定的屏幕，任何帮助将不胜感激！谢谢！！
示例图像此处
唯一的事情是，图像显示一致的屏幕高度，但情
浏览 4提问于2022-08-08得票数 1
1回答
所以我用Javascript/jQuery做了这个自动幻灯片放映。它真的工作得很好，但是我不知道如何根据屏幕尺寸来缩放它，使它变得流畅。它目前针对1920x1080进行了优化。
我尝试将这个值(document.body.style.width)赋值给宽度变量，但没有成功，尝试使用图像的百分比而不是像素，还尝试对媒体查询使用非常麻烦的修复，但都没有用。
如果有人对如何实现这一点有想法，请告诉我(同样，我需要它随浏览器窗口缩放)，不管怎样，下面是代码：
<div class="slider">
<ul class="slides"&g
浏览 3提问于2017-07-18得票数 1
回答已采纳
2回答
我希望我的图像完全覆盖背景。此外，如果除了背景之外没有任何方向的内容，我不想要滚动条。
下面是我能得到的最好的结果，除了我在底部有大约1英寸的空白和水平滚动到大约95%。
SCSS
body, html {
padding: 0 !important;
margin: 0 !important;
}
.workspace {
background: url("../../../assets/Images/WhatIsHunter.jpg") no-repeat center center fixed;
background-size: cover;
hei
浏览 1提问于2017-08-27得票数 0
我想要一个div是视口的100%高。基本代码如下：
现在，在一个真正的网页中，情况会更像这样：
我的div嵌套在其他div中。
我知道第二个示例的代码不起作用，因为为了使一个元素具有其父元素的100%的高度，它的父元素必须具有显式定义的高度，或者是其父元素高度的100%。解决办法：
.four, .three, .two {
height: 100%;
}
然而，一旦您开始添加代码，这个解决方案就变得越来越难实现。是否有一个较短的css规则，允许我设置一个100%的高度给所有的父div？就像第一个孩子，除了父母。
浏览 1提问于2014-10-07得票数 1
回答已采纳
好帮手！
我试图创建一个时间线元素，根据滚动位置在#标记上动画CSS宽度属性。我是jQuery的新手，我知道我可能犯了一些错误.抱歉的。从好的方面来说，我确实做了一些有益的评论，解释了我想做的事情。请看一看，谢谢！
<!DOCTYPE html>
<head>
<!-- CSS Styles Link -->
<link rel='stylesheet' type='text/css' href='styles.css'>
浏览 2提问于2014-11-27得票数 0
回答已采纳
我想知道如何在CSS中设置body标记，以便我要添加新元素的主体的“最大高度”就在导航栏下面(即100% x 35 max)，因此当我添加新元素时，它会自动加载到定义的区域，而不是通常的位置，因为现在有了导航条(左上角)。
浏览 9提问于2022-05-29得票数 0
回答已采纳
我用div来制造口音。它的父级是内容div，它没有特定的高度，因为它是浏览器的高度。div非常简单，具体如下：
<div class="bar-top"></div>
CSS规则是：
.bar-top {
background-color: #000d12;
height: 3%;
max-height: 3%;
min-height: 3%;
}
这个规则不起作用。但是，如果将百分比替换为像素值，则div将正确显示。我认为这与父母没有明确的身高有关，但我想知道更多的技术原因，以及如何克服这一点，如果我想要一个d
浏览 6提问于2015-03-11得票数 1
回答已采纳
1回答
我想要创建一个响应/流畅的网格，其中包含2行内容.tier1和.tier2。内容应该始终与视口的尺寸相匹配，.tier1占高度的60%，.tier2占其余40%。目前，我还不知道最好的方法是什么，使用javascript，我可以监视视图的维度，并设置一个高度，以便.tier容器应用%的高度生效，但我想知道我是否可以使用CSS来完成这个任务？
CSS
.content1 {
height: 60%;
}
.content2 {
height: 40%;
}
<div class="container">
<div class="
浏览 3提问于2013-10-16得票数 0
1回答
自定义CSS (质量控制)
、、、、
我是新来的自定义CSS。我的老板想让我在Qualtrics中添加自定义CSS (在“外观和感觉/高级”下)。在编辑预览窗口中，所有的格式似乎都很好，但是在实际的调查页面中，许多元素的格式没有被应用:图像是原始大小，div是不可见的，等等。
我假设这与单个浏览器有关，我必须指定一些内容，比如webkit，但我不太理解它。下面是我代码的一个简单部分(图片是我最关心的问题)：
HTML：
<img id="bing" src="http://i39.tinypic.com/16kc3k0.jpg">;
CSS：
#bing{
display:blo
浏览 2提问于2013-10-06得票数 0
回答已采纳
2回答
我想让<div>把它的高度a/g调整到浏览器的高度。这个是可能的吗？如果浏览器的高度减小(比如模拟平板电脑/手机中的视图)，则登录按钮不可见。
为了不显示滚动条，我使用
body { overflow: hidden; }
浏览 0提问于2014-06-22得票数 0
2回答
我的页面上有一些图标。
但是，由于我使用的是背景图像，所以必须为div .iconImage.linkedIn指定一个像素高度。我试着指定一个百分比的高度，但没有起作用。我想让这个网站看起来适合不同的分辨率，那么我如何在保持图标的相同功能(在链接上方悬停时显示文本和图像)的同时，给背景图像的div一个百分比的高度？请不要给我一个使用像素或ems表示高度/宽度的答案，因为我想要一个看起来适合不同分辨率的网站。。
HTML:
<div class = "icon">
<a href="https://www.linkedin.com/"
浏览 5提问于2016-12-21得票数 2
1回答
我在一个高度为100%的容器(.inner)中有三个子元素(.container)。在那之后，我有另一个div (.post)，它不会被推到容器下面。
这是一把小提琴
HTML：
<html>
<body>
<div class="container">
<div class="inner">Inner1</div>
<div class="inner">Inner2</div>
<div class="inner"&
浏览 3提问于2015-01-03得票数 1
回答已采纳
我的闪亮应用程序有不同的绝对面板，但它们在不同屏幕上的外观不同。特别是，我注意到面板的大小和其中的文本(通常出现在h()标记中)总是相同的，而一些小部件(如actionButtons)会自动调整大小。下面是一个最小的可复制示例，它的absolutePanel应该出现在屏幕中间：
library(shiny)
ui <- fluidPage(
absolutePanel(id = "initial_panel",
fixed = TRUE,
top = 0,
left =
浏览 6提问于2019-11-15得票数 0
回答已采纳
2回答
我正在做我的第二个网络项目(自学)，我有一个新手问题。
我在我的页面上有一个模拟的页眉和页脚，它们都有100px的高度。我试图改变这一点，以使高度以百分比表示，但当我这样做时，它们就会崩溃。为什么？
代码：
HTML
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Photography</title>
<link rel="
浏览 14提问于2017-02-22得票数 1
2回答
我想知道如何才能将页面的一部分拉伸到完整的高度和宽度？就像一个100%的窗口的全屏区域。嗯，不是如果你调整它的大小，而是你的最大高度。我不知道该怎么做。我该怎么办？
浏览 5提问于2017-07-24得票数 0
回答已采纳
基本上，我想在css中创建一个圆。我的圆圈代码是：
.circle{
border-radius:50%;
width:20%;
height:20%;
}
它位于一个div中，即：
.banner{
width:100%;
height:13em;
}
显然，这个圆不会是一个圆，因为我有它的宽度和高度的百分比，但它周围的容器有不同的宽度和高度。有没有一种方法可以使圆具有相同的尺寸，或者我需要做数学运算才能弄清楚？
浏览 1提问于2014-08-04得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
