使元素宽度成为基于窗口的百分比
是通过使用CSS中的百分比单位来实现的。在CSS中，可以使用百分比单位来设置元素的宽度，使其相对于父元素或视口的宽度进行调整。
具体实现方法如下：
- 使用相对于父元素的百分比：可以通过设置元素的宽度为父元素宽度的百分比来实现。例如，如果要将一个元素的宽度设置为父元素宽度的50%，可以使用以下CSS代码：.element { width: 50%; }这样，无论父元素的宽度是多少，该元素的宽度都会相应地调整为父元素宽度的50%。
- 使用相对于视口的百分比：可以通过设置元素的宽度为视口宽度的百分比来实现。例如，如果要将一个元素的宽度设置为视口宽度的50%，可以使用以下CSS代码：.element { width: 50vw; }这样，无论视口的宽度是多少，该元素的宽度都会相应地调整为视口宽度的50%。
使用基于窗口的百分比可以实现响应式布局，使元素的宽度能够根据窗口大小的变化而自动调整，适应不同设备和屏幕尺寸。这在移动设备上特别有用，可以确保网页内容在不同屏幕上都能够良好地显示。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云云数据库MySQL版（TencentDB for MySQL）：https://cloud.tencent.com/product/cdb_mysql
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
相关·内容
1回答
1 1vw = 1%，那么如果它们是100%可互换的，那么它们为什么都存在呢？我觉得%取决于包装标签的大小，但是不管包装标签的大小如何，vh总是依赖于窗口大小。谢谢,
浏览 2提问于2015-04-05得票数 10
回答已采纳
2回答
它是不使用位置属性的图像
.Brand-image {
width: 55%;
transform: rotate (25deg);
margin-left: 20%;
position: absolute;
但应用上述位置属性后，它的大小会增加
浏览 7提问于2022-03-11得票数 -1
2回答
对于我正在创建的网站，我对div使用百分比，因此当我调整浏览器窗口的大小时，网站布局会变得混乱。我应该如何继续使用百分比，并使布局在浏览器调整大小时保持原样？
浏览 1提问于2011-10-19得票数 5
回答已采纳
1回答
在CSS中，如果我将宽度属性设置为100%，如下所示：
width: 100%;
如果文档的宽度大于窗口的宽度(水平滚动)，则元素的宽度仅为窗口的宽度。如果我向右滚动，它就会立即被切断。
如何使用CSS将元素的宽度设置为文档宽度的min-width，使其在滚动时不会被切断？
浏览 3提问于2013-12-23得票数 0
回答已采纳
1回答
所以我有一个有趣的问题，我试图使一个表格具有完整的圆形单元格来显示数据。所以我测试了不同的边界半径，我从5px开始，然后是15px，等等。但是表格单元格的半径似乎不会增加超过15px。
.calendar.rounded td{
border:solid 1px #de6457;
border-radius: 20px !important;
}
有没有人知道为什么半径没有变大，有没有可能让表格单元格完全成圆形。
浏览 1提问于2013-11-24得票数 0
1回答
使用元视口丢失文本
、、、、
我正在制作我的第一个博客，我试图让它响应，我使用元视口，但当我在不同大小的窗口中用Google Chrome测试它时，我写的文本消失了。下面是我用css和html写的一些代码，展示了我的问题： .hero{
background-color: firebrick;
display: flex;
justify-content: center;
}
.container{
display: flex;
justify-content: center;
width: 1000px;
padding: 10px;
} <!DOCT
浏览 10提问于2020-01-27得票数 0
1回答
我想显示另一个图片在悬停和由于布局的主页，我需要使用雪碧来做它。我把它做得很好，但我用的是固定的宽度和高度。你可以在这里看到我的JSFiddle：
当我想使它有反应时，问题就出现了。我可以使用最大宽度: 100%，但是高度呢？
浏览 3提问于2014-08-08得票数 0
回答已采纳
1回答
这是我的密码
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
#outerdiv {
height: 50%;
width: 99%;
left:1%;
background-color: #000000;
position:absolute;
top:25%;
}
#fretboard {
position:absolute;
width: 100%;
top:5%;
he
浏览 1提问于2014-03-16得票数 2
回答已采纳
我定义了一个带输入框的模式。模式缩放到浏览器窗口的大小。
然而，现有的代码允许输入窗口比模式窗口更宽。
我试过设置输入宽度，但看起来是用字符设置的。因此，虽然我可以使用JavaScript减小它的大小，但它并不能很好地工作。
<body onresize="myFunction()">
<body onload="myFunction()">
<p id="demo"></p>
<input id="AAAA" placeholder=
浏览 0提问于2019-06-19得票数 0
4回答
我在一个div里面有两个图像。我想使用相对于父div的百分比来定位这些图像。
下面是一个需要理解的小提琴：
我试图在图像上设置position: absolute;，但它使用了窗口宽度。
我需要在最右边的图像定位在95%的红色div，而不是窗口。我也不希望左边的图像影响到右边的位置。
浏览 9提问于2015-04-16得票数 1
回答已采纳
1回答
我一直在这个网站上工作，一切都快结束了。直到我发现我的电脑在上--一种高分辨率(1920年x 1080 my )。我在1024x768px上测试了我的网站，它是.可不是我期望的。
不管怎么说，我在网上到处搜索，仍然有一些问题我没有找到答案，所以我在这里问你，希望找到一个答案！
首先，我想要我的网站，是舒适的任何屏幕分辨率的电脑，从1024到1920年。此外，我希望它是舒适的，当你减少窗口(你知道，当你做一个网页只覆盖一半的屏幕)。
)英语不是我的母语，所以我希望你们仍能理解。)
1-我开始使用px。这在分辨率较低的情况下不起作用，用户必须取消缩放。所以现在我使用的是%，就像在网上建议的那样。但
浏览 4提问于2015-05-16得票数 0
回答已采纳
我有以下HTML代码块：
<div class="container clearfix">
<div class="grid_8 omega">
<ul class="nav">
<li><a href="#">About</a></li>
<li><a href="#">Cupcakes & Prices</a></li&g
浏览 0提问于2013-06-02得票数 1
4回答
在访问了许多网站后，我找不到路，如何制作一个充满浏览器窗口的div。首先，它应该是隐藏的，但在回发时它应该是可见的。这个div不是body标记的直接子元素，而是放在表行中。我应该应用什么样的css，这样它才能定位到适合窗口。我在Css下面为div使用，但对我不起作用。
.BodyCover { position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
编辑
Html标记在下面，
<table>
<tr>
<td>Content<
浏览 1提问于2012-12-20得票数 1
4回答
我已经用许多div划分了屏幕，所以它们互相粘在一起(比方说，就像棋盘一样，但是有不同大小的字段)。我使用百分比(相对于父容器)设置heigth和width。
现在，当我将border: 1px添加到div中时，所有的布局都会中断.我设想边框每边增加1 1px，解决方案是添加一些内部边界。我可以在某种程度上增加这样的内部边界吗？
浏览 6提问于2011-07-19得票数 5
回答已采纳
2回答
移动上的图像显示不会集中。
、、、、
我有我的header.php的代码
<!DOCTYPE html>
<html>
<head>
<title>Responsive Navigation Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="normalize.css
浏览 2提问于2014-02-15得票数 1
回答已采纳
1回答
我有两列布局，唯一的东西是页脚区域。在我在它周围添加边框之后。右侧超出预期区域。
我在Firefox中测试了它。一些css：
footer
{
border-style: solid;
border-width: 6px;
margin: 0px;
clear: both;
background-color: rgb(178, 178, 178);
background-image: -webkit-linear-gradient(left, #7ac0da 0%, #a4d4e6 100%);
font-size: .8em;
text-ali
浏览 0提问于2013-06-26得票数 0
回答已采纳
所以我有：
<body style="border:1px solid red;width:100%;">
<div style="position:absolute;left:2000px;">
1
</div>
<body>
在这种情况下，有没有办法将正文宽度设置为文档的100% (包括“滚动空间”)，而不是内部窗口宽度的100%？我的意思是，我需要的结果就像我对正文应用了"width:2000px;“一样，但不知道这个数字。
我知
浏览 0提问于2013-07-05得票数 2
回答已采纳
4回答
有谁能告诉我width和max-width之间的关系(比如哪种覆盖像素、百分比等等)？
如果我想使用它们，我如何使用它们：
当我调整窗口大小时自动缩放图像，当图像达到原始大小时停止缩放？
保持固定大小，直到我将窗口调整为某些小大小，然后开始自动调整大小。
浏览 3提问于2015-02-23得票数 1
3回答
div {
position: absolute;
}
.header {
width:100%;
margin-top: 5%;
}
.content {
width:100%;
margin-top: 15%;
}
浏览了许多关于布局和浏览器调整大小的问题，但我就是不能理解。当我缩小窗口宽度时，是不是使用%而不是px使我的标题和内容div重叠？然而，调整窗口高度并不会导致重叠。
浏览 0提问于2016-01-20得票数 2
2回答
我有以下html：
<table>
<tr>
<td class='tclone' id='clone'></td>
<td class='loader' id='loader'>
<div id='tdiv' style="height:630px; width:835px; overflow:auto;"></div>
<
浏览 2提问于2010-08-18得票数 0
下面的代码按预期工作。我有两个硬币，一个蓝色的，一个绿色的。蓝色占20%，红色占80%。
html,body {
height: 100%;
}
body {
margin: 0;
}
#panel {
width: 20%;
height: 100%;
background-color: #0794ea;
float: left;
}
#map {
width: 80%;
height: 100%;
background-color: green;
float: right;
}
现在我需要将蓝色
浏览 3提问于2013-07-28得票数 0
回答已采纳
1回答
让最大宽度的柱子变液体？
、、、
我有一个流畅的/响应性的列布局，如：
.row{
float:left;
max-width:960px;
width:100%;
}
.column{
float:left;
margin:0 15px;
}
.column:first-child{
margin-left:0;
}
.column:last-child{
margin-right:0;
}
.column.third{
max-width:300px;
}
html：
<div clas="row">
<div
浏览 2提问于2014-04-28得票数 1
回答已采纳
1回答
这是我的网站：
在IE7中，有时菜单中的最后一个链接“联系人”会被下推到下一个级别，而其他时候则不会。
如果我调整浏览器窗口的大小，它就会重复地从原来的一行跳到最后一个链接。奇怪的是，在一定的宽度下或超过一定的宽度，它是不正确/错误的，当我调整大小时，它会继续跳来跳去。
有人知道为什么会发生这种事吗？我以前从来没有听说过这样的bug。谢谢
浏览 1提问于2011-03-24得票数 0
回答已采纳
2回答
我在CSS上还是个乞丐。对不起，如果我惹恼了某人;)
我想用图像做一个简单的标题。我的问题是，当我放大和缩小浏览器，图像超过或留下空间的div。
我的目标是执行包含多个平方div的标题和内容div。当我放大时，我希望在内容中保持每一行3div，并且我也希望适当地调整标题的图像大小。但是，相反，图像超过(或离开-空间) div限制，内部div下降和上升时，我放大和缩小。
HTML：
<div id="wrapper">
<div id="content">
<div id="header"&g
浏览 0提问于2014-07-03得票数 0
回答已采纳
我想要一个相对于我的窗口大小的div比例，不管是因为我是在移动上还是我在缩放浏览器。但是，当我试图将div的大小设置为
div {
width: 80%;
height: 50%;
background-color: grey;
}
它不起作用。我已经阅读过了，我似乎需要定义一个参考div，但这不会使div扩展到屏幕上。我认为<meta>标记可以修复一些问题，但是我在这个项目中使用了codepen.io，我不知道我是否可以包含它，因为他们唯一需要的html是身体中的任何东西。
浏览 2提问于2020-09-23得票数 0
回答已采纳
5回答
可以通过jQuery更改div的宽度吗?如果可以，如何更改？
我想要的是根据浏览器的窗口宽度实时改变窗口的宽度，所以如果/当用户改变浏览器窗口时，div的尺寸也会实时改变。
浏览 0提问于2011-11-16得票数 21
回答已采纳
3回答
考虑下面的html
<div id="parent">
<div id="child"/>
</div>
我给了父母100磅的身高。儿童身高为100%，填充物为"10% 0“。在CSS中：
* {
box-sizing: border-box;
}
#parent {
height: 100px ;
}
#child {
height: 100%;
padding: 10% 0;
}
或者退房 jsfiddle。无论如何，从上面我可以预期子div的顶部/底部边框为10 10(10
浏览 6提问于2013-11-27得票数 3
回答已采纳
它能给一个div的宽度，一个百分比的窗口，一个高度，一个特定的百分比，它的当前宽度？因此div会调整大小，但在调整浏览器窗口大小时保持相同的高宽比。
谢谢再见
浏览 4提问于2014-12-12得票数 5
回答已采纳
根据许多消息来源，div的高度(如果给定为百分比)被确定为其父级宽度的百分比。为什么如果你调整窗口的大小使其水平变小，那么窗口的内容也不会垂直变小？
只有一个div的简单页面。
浏览 0提问于2014-04-24得票数 0
回答已采纳
2回答
我将尽可能简单地解释这一点，这很可能不是一件很难解决的事情，但我正在努力解决它。
这是我的html：
<div id="nav">
<div id="logo">Jack Thomson</div>
<a href=".." class="active">Home</a>
<a href=".." class="nav">About</a>
<a href="/contact" class=&#
浏览 1提问于2012-03-30得票数 1
回答已采纳
我有以下css为我的网站的一个特定部分：
.menu{
top:7%;
height: 100%;
left:10%;
bottom:10%;
width: 18%;
height: 47%;
z-index:1;
position:absolute;
}
.menu .star{
background: url("button.png") 0% 0%/ 80% 80% no-repeat;
border: none;
width:5em;
height:5em;
p
浏览 3提问于2016-05-10得票数 1
回答已采纳
我试着在页面的右下角放置一张图片，并让它始终在那里。我已经做到了这一点，但我在缩小浏览器窗口时遇到了一个问题(在屏幕较小的情况下，在不同的建议中查看它也是一个问题)。当我使浏览器变小时，图像保持相同的大小，并最终重叠在其他项目上(例如我的菜单)。有没有什么办法可以让图片和浏览器一起自动变小？
我用来将图片放在右下角的css代码如下所示：
display:block;
float:right;
bottom:0;
right:0;
width:340px;
该图像是放置在我的html的div中的png图像。
我希望有人能理解我的意思，并帮助我！
浏览 3提问于2013-03-16得票数 1
我需要.html文件中特定行中的一列来占用空间，但它将是空空间。当我把它放在行的Div中，并将div的类设置为正确的列大小时，它将不会显示。我准备好了开场和闭幕的div
<div class = "row-2">
<div class = "col-5">
</div>
<footer class = "col-7">
*other code*
</footer>
</div>
对于列宽为5的页脚，应该在页脚的左侧留出空间，而页
浏览 6提问于2019-07-14得票数 0
4回答
我是CSS的新手，我正在尝试建立一个页面并运行起来。我成功地生成了一个我认为很好的页面，直到我调整了浏览器窗口的大小，然后一切都开始移动。我不知道为什么会这样！
有人能给我一些建议吗？当我调整窗口大小时，我希望“对象”留在原来的位置，但窗口要调整大小。例如，如果我向上和向左拖动窗口的下角，我希望看到右下角的内容消失，滚动条出现，但左上角的对象将保持在原来的位置。
我说的有道理吗？
看看我的页面的工作状态：
然后尝试通过向左拖动合适的大小来调整浏览器窗口的大小。看看标题中的内容，还有菜单栏。它们向下跳，标题内容也向下跳，然后我使溢出:隐藏；..但据我所知，这一切都不是正确的方式。
请在此处找到h
浏览 3提问于2012-01-13得票数 26
回答已采纳
1回答
我正在尝试使.header、.mainBanner和li的页边距底部css属性相对于文档/窗口的高度缩放，但它们是相对于文档/窗口的宽度缩放的，而div的高度是适当缩放的……
height:8%
上面的比例是正确的
margin-bottom:2%;
上面的不是。
我如何让它们相对于高度缩放？
浏览 0提问于2013-01-25得票数 0
回答已采纳
我在<pre>标签中有一些源代码，当浏览器窗口调整大小时，我想滚动这些源代码。预标记包含在flex框中，包含div设置为flex: 1。
如何使代码水平滚动？
<div style="display: flex;">
<div style="flex: 1;">
<div style="max-width: 100%; overflow-x: auto; min-width: 0;">
<pre>
Lorem ipsum dolor sit amet, con
浏览 1提问于2021-08-28得票数 0
回答已采纳
我有一个问题的CSS计算返回错误的值为%。
我的想法是创建一个粘性的侧边栏，你首先滚动到最后，然后它会一直留在那里，直到内容结束。当我对div使用绝对高度时，它适用于vh单位，但当我使用%时，它就不起作用了。
.sidebar {
position: sticky;
top: calc(100vh - 100%); <-- does not work
top: calc(100vh - 1600px); <-- works as expected.
}
因此，我可能误解了%在这个上下文中的含义(我的理解是:应用.sidebar类的对象的高度)，或者calc()不适合使用？
编辑：
浏览 0提问于2018-06-17得票数 5
我正在创建一个插件，以帮助网站响应。第一步是创建一个故障安全机制，使事情看起来像他们应该做的那样。
在页面加载时，我希望获得最大窗口大小的元素的宽度。目前，我只是这样做：
var theElements = ['div',
'section',
'table',
'article',
'aside',
'details',
浏览 1提问于2013-01-23得票数 0
回答已采纳
3回答
我知道您在想什么，但是父容器都是用像素定位的。
我有一个高度和宽度以像素为单位的div，在这个div中我有一个youtube iframe，在这个例子中，它的百分比是margin-top。
这是HTML：
这就是结果：
我知道这是一个可笑的小帧(所选div的右下角)，但它只是一个例子:)
正如您所看到的，在代码中，我将margin-top设置为99%，但实际上它的位置要低得多。这可能是什么原因？
浏览 2提问于2014-03-09得票数 6
回答已采纳
我是一个响应式网页设计的新手，正在寻找一个。
它并没有真正解释太多，但提供了一个解决方案。
如果img被设置为width: 100%，我知道它将占据浏览器窗口或其包含元素的100%。
用于设置元素最大宽度的max-width属性。
如果我将img标记设置为max-width: 100%，那么百分比是根据什么元素/上下文计算的？
我所看到的是，当使用max-width时，图像会缩小，但永远不会放大。
最大宽度示例：
宽度示例：
浏览 0提问于2016-08-08得票数 1
<div id = "parent" style = "width:100px; height:100px">
<div id = "child" style = "width:20px; height:20px; font-size:1vw">
Hello there
</div>
</div>
诚然，我对css的理解很差，那就是字体大小:1em，会根据元素本身的宽度的百分比来确定"hello there“的大小。“孩子”的宽度
假设这是正确的，它是否有可能
浏览 10提问于2021-12-22得票数 0
我是CSS的新手，我想知道是否有某种规则/经验法则来决定何时使用不同的单位来定义布局。目前我所有的东西都是用%定义的，因为我觉得这对调整窗口大小很有好处。事实并非如此，文本开始溢出，图像变得乱七八糟，等等。任何帮助都会被提醒。
浏览 0提问于2011-07-08得票数 3
回答已采纳
1回答
我创建了一个小页面()，使用的是内容管理系统made ()。它在所有浏览器中看起来都没问题，但问题是，如果将窗口大小调整到较小的尺寸，有时子导航层的布局会被破坏。所有元素都或多或少地随机排序，而不是变得更小。有什么线索吗？
浏览 1提问于2010-05-23得票数 0
回答已采纳
例如，在这个家伙的网站()中，不管你放大多少窗口，包含他的名字和背景的div占据了整个屏幕，直到你向下滚动或者点击'read‘链接，它有一个scrollTo功能。有人能给我解释一下吗？
浏览 3提问于2017-08-29得票数 0
回答已采纳
我想要一个div占据整个窗口的宽度，以及有一些填充或边缘或边框。我知道我可以给div一个宽度，比如说90%，并有5%的填充、边距或边框。这很有效，但当我要缩小窗口大小时，边框或边距或填充开始缩小。我不想这样。因此，我向专家提出的问题是，如何使用固定的填充、边距或边框？
在窗口较窄的情况下，我更倾向于使用媒体查询来检测宽度，然后为某个宽度提供另一个固定的填充、边距或边框。提前感谢
浏览 0提问于2012-06-04得票数 0
回答已采纳
3回答
我有一个绝对位置浮动在右边(绿色)的div。正确的是，突出一半的问题是当窗口缩小到985 to页面的最小大小时。虽然div是浮动的，但它可以通过减少窗口滚动来避免这种情况吗？
<body style="width:100%; min-width: 985px; padding:0px; margin:0px; color:#FFFFFF; background:#160E30; border:2px solid yellow;">
<div style="position:relative; width:985px; margin:0 aut
浏览 2提问于2014-11-06得票数 1
回答已采纳
2回答
我有两个div，第一个是相对位置的div，另一个是绝对位置的div，当我将浏览器调整到100%的屏幕尺寸时，一切似乎都很好。
当我调整浏览器的大小时，当绝对位置的第二个元素出现在容器之外时，问题就来了，虽然不多，但仍然在外部的不同位置。
演示：
我的CSS代码：
#container_front {
position:relative;
width:40%;
margin-left:auto;
margin-right:auto;
}
#front_like {
position:absolute;
width:50px;
height
浏览 8提问于2014-09-09得票数 0
我有一个div，它设置为窗口高度的100%，最大宽度为窗口宽度的66%。html和body设置为100%，overflow:none，因此不允许/不允许滚动。
我希望能够缩放任意的<img>来填充尽可能多的空间。我不喜欢使用背景图像，因为现有的JS代码与<img>元素交互。
这似乎是一个显而易见的起点：
<img style="height:100%;max-width:66%">
但最大宽度似乎来自浏览器高度的百分比，而不是宽度。而且它不会保持它的纵横比，这绝对是一个不想要的效果！
我可以使用JS来完成这项任务，但如果有CSS解决方案，我会
浏览 1提问于2016-02-23得票数 0
我正在构建一个响应式的网站，我想知道我应该使用什么单元？我见过很多使用像素(px)进行测量的站点，也有一些使用百分比(%)的站点。有没有更好的--或者正确的--做响应式设计的方式？
我发现percent很难使用，因为它使计算变得困难，当我设置宽度/边距等时，我最终得到了2.754%等值。像素似乎更容易，它只是简单的加法和减法，但我读到它不是“未来的证明”或类似的东西，并且如果用户放大浏览器窗口，它将不会正确缩放。这仍然是真的吗？
如果您有任何经验或专业知识，请分享！我很想听听你们有什么要说的！
谢谢!
浏览 0提问于2013-04-06得票数 35
假设我们有以下HTML：
<div id='parent'>
<div id='child'>
</div>
</div>
如果我们设置这个CSS：
#parent {
width:1000px;
height:1000px
}
#child {
width:20%;
height:40%;
margin-top:10%;
}
子元素将有一个margin-top，它将是父高度或子高度的%？此外，当涉及到边际时，浏览器呈现%大小的方式也不同？如果对子/父
浏览 2提问于2013-04-12得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
