为什么我的div width 100%不能工作，即使我使用新的类
问题：为什么我的div width 100%不能工作，即使我使用新的类？
回答：
div元素的width属性设置为100%时，应该能够占据其父元素的全部宽度。然而，如果设置width为100%后仍然无法正常工作，可能有以下几个原因：
- 父元素没有设置明确的宽度：如果父元素没有设置宽度，那么子元素的百分比宽度将无法计算。确保父元素具有明确的宽度，可以是一个具体的像素值或百分比值。
- 父元素有边框或内边距：如果父元素有边框或内边距，这些额外的空间将会减少子元素的可用宽度。可以尝试使用CSS的box-sizing属性将盒模型设置为border-box，以确保边框和内边距不会影响子元素的宽度计算。
- 子元素有浮动或定位：如果子元素设置了浮动或定位属性，它们将脱离文档流，并且不再占据父元素的空间。在这种情况下，可以尝试清除浮动或调整定位属性，以确保子元素能够正常占据父元素的宽度。
- 子元素有其他样式或类冲突：检查子元素是否有其他样式或类与宽度属性冲突，可能会导致宽度无法正常生效。确保没有其他样式或类覆盖了宽度属性。
如果以上方法都无法解决问题，可以提供更多的代码和上下文信息，以便更准确地分析和解决问题。
推荐的腾讯云相关产品：腾讯云云服务器（CVM） 产品介绍链接地址：https://cloud.tencent.com/product/cvm
相关·内容
3回答
我给了两个div内边栏div 20便士的保证金。但出于某种原因，两家公司之间的差距只有20%，应该是40%。20便士来自box1，20便士来自box2。我是不是错过了一些小事。请指出。
Fiddle:
HTML:
<div class="sidebar">
<div class="box1 common">
<p>Text is here</p>
</div>
<div class="box2 common">
浏览 5提问于2014-06-06得票数 0
回答已采纳
2回答
我已经为eBay创建了一个页面，我已经在资源管理器、Safari和火狐上测试过了，一切都很好。但是由于某种原因，当我将代码转储到eBay中并预览它时，页面会呈现在左侧。我尝试了各种不同类型的CSS的搜索，但我一直无法找到一个解决方案。所以我在这里。有没有人能解释一下我到底做错了什么。
提前谢谢。
<style type="text/css">
body {
background-color: #FFF;
text-align:justify;
font-size:13px;
}
#co
浏览 0提问于2012-01-07得票数 0
回答已采纳
我正在努力学习前端web开发的基础知识，并且我很难理解为什么body::before的行为方式是这样的。我有以下CSS代码：
body::before {
content: "";
position: fixed;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0), rgba(255, 255, 0, 0.45)), url(https://cdn.pixabay.com/photo/2015/03/03/05/56/avenue-656969_960_720.jp
浏览 1提问于2021-07-01得票数 2
回答已采纳
嗨，有人能帮我一下吗。我有：
<html>
<body>
<div style="width=100%">
<div style="float:left; background-color:Red; height:100px">Red</div>
<div style="background-color:Green;">Green</div>
<div style="background-color:Yellow;"&
浏览 0提问于2011-05-05得票数 1
我正在使用chartjs版本1.02作为我的报告。我从文档中获取了一个示例，以呈现一个简单的线条图。当我体验这些选项时，我意识到有一个非常有用的option(responsive)可以在调整浏览器大小时自动调整图表的大小。在将此选项放入选项对象之前，可以呈现图表，并且一切正常。添加此“响应”选项后，图表将停止呈现。我想知道这个选项是否适用于线条图，或者这个选项必须依赖于我错过的其他选项。
这是我的密码
var data = {
labels: ['January', 'February', 'Marc
浏览 4提问于2015-07-30得票数 1
回答已采纳
2回答
我有两个硬币。一个是左边的，一个是右边的。左边的宽度设置为18%，最小宽度为217 18。我想让右边的div占据剩余的空间，同时也可以调整大小以适应窗口。
我遇到的问题是，我可以将右div的宽度设置为82%，并将其向右浮动，直到使窗口一侧太小为止，在这种情况下，左div的最小宽度就会启动，并且停止收缩。右边的div没有足够的空间来容纳，所以它被向下推。
这是一些示例代码。
<div id="div1">
stuff inside of it
</div>
<div id="div2">
浏览 0提问于2014-01-04得票数 0
回答已采纳
4回答
我只是想解决这个问题。
CSS：
.default-img > img {
height: 100px;
width: 100%;
background: url('bg.png');
background-size: cover;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
border: 10px solid black;
}
我有一个白色的“边框”
浏览 1提问于2017-02-23得票数 2
回答已采纳
2回答
子元素不是拉伸父容器
、、、
子元素而不是伸展父容器。
我的代码：
html：
<div class='window'>
<div class='wrapper'>
<div class='short'>short</div>
<div class='long'>long</div>
</div>
</div>
css：
.window{
width: 500px;
height: 100px;
浏览 0提问于2013-05-24得票数 2
回答已采纳
我在我的应用程序上有一个背景图像，我希望我的列表视图以一个窗口的形式覆盖背景图像。有点像这张图片中有一个白色过滤器的表单：
我目前有一个在xml中定义的listview，它包含：
android:layout_width="fill_parent"
android:layout_height="fill_parent"
以半透明的颜色作为背景。这很棒，但是它占据了整个屏幕，因为它填充了父级宽度和高度。怎样才能使它比父母的尺寸稍微小一点，这样就可以说，(fill_parent -一些相对值)的高度和宽度？
浏览 5提问于2013-09-15得票数 0
回答已采纳
在网页中只有一个div之间有一个空格。将其重新创建为jsfiddle
问题出在“Blue Ridge Parkway上的瑞士旅店”横幅和下面的正文之间。div标签的顶部和底部都有一个空格。下面是在jsfiddle页面上找到的css代码...
#main_holder {
width: 75%;
min-width: 750px;
margin-right: auto;
margin-left: auto;
border: 5px solid #E2BE6A;
position: relative;
-moz-box-shadow: 0px 0px 21px 5px rgba(2, 1, 14
浏览 0提问于2013-03-10得票数 0
回答已采纳
2回答
我试图在引导的帮助下制作一些html表单。我的一些投入不能有左或右的差距。但是，引导. blocks Y块有从左和右的垫子沟槽。所以我的想法是对输入元素使用负值，并显示:块。我被困在这里了。请参阅此。我面临着一些奇怪的事情：
为什么display: block的输入没有像div那样填充它的父容器呢？它只使用：width:100%; (代码示例中红色边框输入的注释width )填充容器。
为什么如果我应用负的margin-left来补偿父容器的左填充，我的输入会移到左边，但是保持原来的宽度(就像使用了left css属性)。它不需要表现得像块元素(例如div)：向左移动，并继续填充它的父
浏览 6提问于2015-07-22得票数 0
回答已采纳
据说，“填充百分比是基于父元素的宽度”。Padding-top: 100%和width: 100%应该给我方形的形状。这不是我的案子我也不明白为什么。
假设我有这样的结构：
<body>
<div class="wrapper">
<div class="page">
<div class="group">
<div class="section">
</div>
</div>
浏览 5提问于2020-03-06得票数 0
我需要的字体大小来匹配我的设计是85pt，这是非常大的。在IE6和IE7中，我的设计会受到影响，因为包含这些元素的div会比正常情况下变得更大，结果是这些元素下的元素会进一步向下移动，这在某种程度上破坏了设计。我为这些元素定义了高度，当我减小字体大小时，这些元素开始收缩到正确的大小。我在元素中添加了line-height: 0；，这在所有现代浏览器中都有效。
不幸的是，我正在做的设计不能公开展示，但我希望能获得一些其他可能的技术，我可以尝试让设计正确呈现。父元素的高度为144px，包括顶部和底部的10px填充以及顶部和底部的1px边框。
不幸的是，我没有更多的信息可以添加到这里，但如果有人问我
浏览 0提问于2009-06-16得票数 2
回答已采纳
我的问题是我的背景容器只显示到屏幕底部。在那之后的部分我就看不到了。我几乎什么都试过了，但似乎没有一样对我管用。我希望它能根据页面大小进行调整。
<body>
<div id="profilebg">
<!-- Other divs -->
</div>
</body>
我的CSS是
html, body {
height:100%;
}
#profilebg
{
position: absolute;
margin-left:10%;
margin-right:10%;
浏览 2提问于2013-01-10得票数 3
回答已采纳
4回答
使菜单居中
、、
我不明白为什么我的菜单没有居中。我尝试了从内联元素到页边距的所有方法:0auto；到align=“align=”，但我无法使菜单居中。你可以在这里看到它，你必须一直向下滚动才能看到它，只有当它经过主菜单时才会出现。下面是一些css
.scrollmenu {
display:none;
position: fixed;
top: 0;
text-align:center;
margin: 0px auto;
width: 1020px;
z-index: 10000;
padding:0;
}
.scrollmenu li{
浏览 4提问于2013-01-01得票数 2
回答已采纳
这个问题在我的IE8和Chrome上发生了，这让我认为这是一个标准的东西。
我创建了一个网站的标题和菜单使用DIVs，没有任何内容，但有背景图片和高度/宽度设置在CSS。我希望内部div相对于父DIV具有边距，但它将边距应用于父div。将内容放在div中可以纠正这一点。IE7没有这个问题。我不想使用 ，因为它确实抛出了一些东西，而且看起来像是一个hack。
请参考下面的示例代码进行重新创建：
<style>
#header{
width:600px;
height:300px;
background-color:red;
}
#head
浏览 0提问于2009-08-29得票数 1
回答已采纳
在给定的代码中，在div.text部分中，当我分配position: absolute时，display: block属性变得不活跃，我必须设置width: 100%来对齐中心的文本。理由是什么呢？
为什么我必须首先将position属性设置为容器的relative，以便将子元素的位置设置为absolute？如果我不设置父容器的position: relative，则元素相对于body标记定位。为什么？
body,
html {
height: 100%;
margin: 0;
}
div.first-div {
background-image: url(l
浏览 0提问于2019-04-12得票数 0
1回答
好的，我真的很难理解float属性的行为。
这一页是750 px宽。为了将它保持在屏幕的中心位置，我使用了以下代码：
<div align="center">
<div align="left" style="width:750px; border-style:double;">
stuff
</div>
</div>
主750 px宽容器中的元素是具有下列样式的其他容器：
div.infoCont //these containers usualy have two
浏览 0提问于2013-04-03得票数 3
我有一个非常简单的布局，有2个DIVS:一个固定宽度的左栏和一个右边的区域，应该占据剩余宽度的100%。两者都是100%的高度，我希望正确的项目有一个垂直滚动条，如果高度高于窗口高度。
我当前的代码占据了整个浏览器窗口，但是右侧区域滚动到了浏览器右侧的可视区域之外，而且从来没有一个垂直滚动条可见。
HTML：
<body>
<form id="Form2" runat="server">
<div class="page">
<div class="
浏览 1提问于2011-06-07得票数 6
回答已采纳
下面是我的测试代码：
.div1 {
width: 100px;
background: red;
padding-top: 0.1px;
border: solid;
}
.div2 {
width: 100px;
margin: 100px;
background: pink;
}
.div3 {
overflow: visible;
}
.div4 {
overflow: hidden;
}
<p>sample 1</p>
<div class="div1">
<div class=&#
浏览 5提问于2016-01-14得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
