百分比高度不起作用 [英] Percentage Height not working
问题描述
我正在尝试调整网站的窗口/表格大小
（ www.worklaw.co.za ）使用了DIV标签及其设置
嵌入在CSS文件中。
客户希望其宽度和高度根据动态
屏幕尺寸进行调整，并且我已经能够将宽度调整为百分比
值，这可以正常工作。但是如果我尝试用高度做同样的事情那么
显示一些非常奇怪的结果，挤压场地显示大约3
线。
以下内容是从css文件中复制出来的：
。内容{position：relative;
left：70px;
身高：388px;
宽度：90％;
顶部：15px;
溢出：自动;
滚动条箭头颜色：海军蓝色
border-style：solid;
border-width：2px;
border-color：
黑色＃E9E9E9＃E9E9E9黑色;
填充：3;
}
我已经如你所见，将宽度改为90％，但这并没有帮助。
任何想法为什么一个百分比不适用于高度？
Brendon
le ***** @ anti-spam.iafrica.com （Les Juby）写道：
（ www.worklaw.co.za ）使用了DIV标签
这样的短语我使用过div标签通常表明海报
完全误解了HTML和CSS，我担心你不是不同的b $ b。你创造的东西被称为div汤，你没有
结构或语义标记。
人们通常在误入歧途中这样做试图摆脱
表现标记。在这方面，你贬低了趋势，你的
代码仍然毫无顾忌地包含弃用的垃圾，如< font>和
< center>标签，通常大量使用& nbp; s，对齐属性和
顶部用于布局的表格。
目前CSS应该是你最后的担忧，你真的需要
首先学习如何正确标记。
-
Spartanicus
Spartanicus是对的。但是现在这对你没有帮助......
身高：100％;表示100％的周围元素。如果你没有为周围的元素设置
的高度，那么就像它的内容一样高（> b $ b）（加上它的填充）。如果你设置
html，body {height：100％;}
它会起作用。
Chris
2005年9月30日星期五06:48:28 +0200，Les Juby
< le ***** @ anti- spam.iafrica.com>写道：
我正在尝试调整网站的窗口/表格大小
（ www.worklaw.co.za ）使用了DIV标签及其设置
嵌入在CSS文件中。
以下内容是从css文件中复制出来的：
.Content {position：relative;
left：70px;
高度：388px;
宽度：90％;
顶部：15px;
溢出：auto;
scrollbar-arrow-color：navy
border-style：solid;
border-width：2px;
border-color：
黑色＃E9E9E9＃E9E9E9黑色;
填充：3;
}
这不是很好writen。首先取出你的
样式中的东西，试图弄乱浏览器的chrome（就像那个
滚动条东西）。镀铬不适合你玩。它是我的。
然后尝试在编写样式表时获得一些结构。例如，我
对选择器的各种属性使用固定顺序。对于一个与块级元素一起使用的选择器
，我这样做：
位置，顶部，左边，宽度，高度，填充，边框，
保证金，背景，颜色，字体
不是说这是应该处理的订单属性，而只是
意思是告诉你，使用固定的订单，有助于写作
过程（你不能忘记太多）并帮助事后调整你的表格
（你知道事情在哪里）。
第三，了解可以遗漏的东西。通常''overflow：auto;''不应该是
必需，因为它是块级元素的默认值，所以，
除非你''设置一个父级（或更高的级联）与另一个值
溢出（希望不是），这里没有必要设置它。
此外，了解简写如何作为属性的符号
和值。边界属性通常可以放在一起（例如
''border：black 2px solid;''，虽然在这种情况下有点难以使用
不同的着色各种边界）。
一个大问题是px中的大小调整。如果您在px中设置布局元素的大小
，我需要更改文本的大小以便于阅读
（更大;几乎不小），很可能你珍贵的设计
分崩离析。为防止这种情况发生，请使用em代替，或使用任何其他
相对单位。无论如何，请使用一个单位。在你的例子中，你遗漏了具有填充值的单位
。 ''填充：3;''三是什么？ PX？他们吗？奶牛？
最后：如果你使用百分比，总是要确保你知道什么是
它需要百分比。所以''宽度：90％;'' - > 90％的是什么？什么是
包含框，父块级元素？
-
， - - < - - @ - PretLetters：''woest wyf''，遇见了vele interesses：----------。
|博客| http://home.wanadoo.nl/b。 de.zoete / _private / weblog.html |
| webontwerp | http://home.wanadoo.nl/b。 de.zoete / html / webontwerp.html |
| zweefvliegen | http://home.wanadoo.nl/b。 de.zoete / html / vliegen.html |
` --------------------------- ----------------------- - < - @ ------------''
I am trying to adjust the window/table size of a website
(www.worklaw.co.za) which has made use of DIV tags with its settings
embedded in an CSS file.
The client wants its width and height to adjust according to dynamic
screen size, and I have been able to adjust the width to a percentage
value which works fine. But if I try do the same with the height it
shows some very strange results squashing the field to display about 3
lines.
The following is copied out of the css file:
.Content {position:relative;
left:70px;
height:388px;
width:90%;
top:15px;
overflow:auto;
scrollbar-arrow-color:navy
border-style:solid;
border-width:2px;
border-color:
black #E9E9E9 #E9E9E9 black;
padding:3;
}
I''ve changed the width to 90% as you can see, but that hasn''t helped.
Any ideas why a percentage wouldn''t work for height?
Brendon
le*****@anti-spam.iafrica.com (Les Juby) wrote:
(www.worklaw.co.za) which has made use of DIV tags
A phrase like "I''ve used div tags" is usually a sign that the poster
completely misunderstood both HTML and CSS, I''m afraid that you are no
different. What you''ve created is known as "div soup", you have no
structural or semantic markup.
People usually do this in an misguided attempt to get rid of
presentational markup. On that front you buck the trend in that your
code still unashamedly contains deprecated rubbish like <font> and
<center> tags, the usual lavish use of &nbp;s, align attributes and to
top it off tables used for layout.
Currently CSS should be the last of your worries, you really need to
learn how to markup properly first.
--
Spartanicus
Hi,
Spartanicus is right. But this doesn''t help you anyway at the moment...
height:100%; means 100% of the surrounding Element. If you don''t set a
height for the sourrounding Element, it is as heigh as it''s content
(plus it''s padding). If you set
html, body {height:100%;}
it will work.
Chris
On Fri, 30 Sep 2005 06:48:28 +0200, Les Juby
<le*****@anti-spam.iafrica.com> wrote:
I am trying to adjust the window/table size of a website
(www.worklaw.co.za) which has made use of DIV tags with its settings
embedded in an CSS file.
The following is copied out of the css file:
.Content {position:relative;
left:70px;
height:388px;
width:90%;
top:15px;
overflow:auto;
scrollbar-arrow-color:navy
border-style:solid;
border-width:2px;
border-color:
black #E9E9E9 #E9E9E9 black;
padding:3;
}
This is not verry well writen. First of all take out what ever is in your
styles that attempt to mess with the chrome of the browser (like that
scrollbar thingy). The chrome is not yours to play with. It''s mine.
Then try to get some structure in writing your stylesheet. For example, I
use a fixed order for the various properties for selectors. For a selector
that is meant to be used with a block level element, I do:
position, top, left, width, height, padding, border,
margin, background, color, font
Not said that this is the order properties should be dealt with, but just
meaning to tell you that working with a fixed order, helps in the writing
proces (you can''t forget much) and helps afterwards to tweak you sheet
(you know where things are).
Thirdly, learn what can be left out. Usually ''overflow:auto;'' shouldn''t be
necessary, since it is the default value for a block level element, so,
unless you''ve set a parent (or higher up the cascade) with an other value
for overflow (hope not), here it is not necessary to set it.
Further more, learn how the shorthand works as a notation for properties
and values. The border properties can often be put together (like
''border:black 2px solid;'', although in this case that is a bit hard with
the different colouring of various borders).
A big issue is the sizing in px. If you set sizes of elements for layout
in px and I need to change the size of text for comfortable reading
(larger; hardly ever smaller), it is very likely your precious design
falls apart. To prevent that from happening, use em instead, or any other
relative unit. In any case, use a unit. In your example you''ve left out
the unit with the value for padding. ''padding:3;'' Three what? px? em? Cows?
Than finally: if you use percentages, always make sure that you know what
it takes the percentage off. So ''width:90%;'' --> 90% of what? What is the
containing box, the parent block level element?
--
,-- --<--@ -- PretLetters: ''woest wyf'', met vele interesses: ----------.
| weblog | http://home.wanadoo.nl/b.de.zoete/_private/weblog.html |
| webontwerp | http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html |
|zweefvliegen | http://home.wanadoo.nl/b.de.zoete/html/vliegen.html |
`-------------------------------------------------- --<--@ ------------''
这篇关于百分比高度不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
