如何在没有javascript的情况下使用css混合依赖于内容和百分比高度/宽度[重复]
Posted
技术标签:
【中文标题】如何在没有javascript的情况下使用css混合依赖于内容和百分比高度/宽度[重复]【英文标题】：How-to mix content-dependent and percentage height/width using css without javascript [duplicate] 【发布时间】：2011-10-07 15:53:04 【问题描述】：我想实现这样的布局：
-----------------------------------------------------------
| |
| header height is its content dependant. |
| its height is not set. |
| it is as heigh as its content stretches it |
|----------------------------------------------------------|
| | s |
| takes all the rest available screen height | c |
| it is fluid height, not fixed, | r |
| dependent on the screen height | o |
| | l |
| | l |
| | b |
| | a |
| | r |
------------------------------------------------------------
使用css和html，没有javascript，可以吗？滚动条应该从上到下完全可见。
这里设置了一个示例布局http://jsfiddle.net/uKejq/9/ 我想实现相同的目标，但不使用 javascript。有可能吗？
【问题讨论】：
你是说这个问题的“使用 JavaScript”吗？ 不同之处只有一个但非常重要的一点：标题高度应该取决于其内容，而不是像上一个问题那样固定。 对三十点：不，我的意思是不使用 javascript。使用 javascript 时，我在 jsfiddle 上设置了一个示例。我想在不使用 javascript 的情况下达到同样的效果。 你不应该问一个问题，然后改写一下并重新问。 oezi 指出，在这个问题之前不久，同一个 OP 也问了同样的问题。 @Chris：我明白你在说什么，但在我回答后问题完全改变了，OP 意识到他真正想要什么。根据这个元问题，最好在这种情况下提出一个新问题：meta.stackexchange.com/questions/96560/… 【参考方案1】：请参考这里，
移除边框并调整所需的宽度。
CSS
#headerWrapper
border:1px solid black;
width:302px;
#header
border:1px solid red;
min-width:300px;
min-height:100px;
background:green;
#headerScrl
width:300px;
height:100px;
overflow:scroll;
HTML
<div id="headerWrapper">
<div id="header">
header
</div>
<div id="headerScrl">
<p> content </p>
<p> content </p>
<p> content </p>
<p> content </p>
<p> content </p>
<p> content </p>
<p> content </p>
</div>
</div>
http://jsfiddle.net/uKejq/1/
【讨论】：
留个小问题：要适合页面$-) 移除所有宽度或添加宽度100% 您的标题是固定高度的，整个内容不适合页面。不太对。。 jsfiddle.net/uKejq/5/show 我没有放任何标题内容，现在给出 min-height 只是为了显示 @Sarath Saleem 删除高度而不是宽度【参考方案2】：css:
* margin:0px;padding:0px;overflow:hidden
body
overflow: hidden;
div position:absolute
div#header top:0px;left:0px;right:0px;height:60px; border: 1px solid #000
div#wrapper top:60px;left:0px;right:0px;bottom:0px; overflow: scroll;
html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<body>
<div id="header"></div>
<div id="wrapper">
saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>saoskufdh ask;ldufh asdf gasdf asdf asdf asdf <br/>
</div>
</body>
【讨论】：
页眉高度不流畅。 @Subdigger：感谢您提出解决方案，但正如 30dot 已经提到的那样 - 如果标题高度不固定，但可以拉伸以适应其内容。以上是关于如何在没有javascript的情况下使用css混合依赖于内容和百分比高度/宽度[重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何在没有 javascript 的情况下使用最大高度和宽度来灵活调整 css 图像大小，同时保持图像纵横比？
windows编程：在没有支持“立体声混音”的驱动程序的情况下抓取音频
如何在不使用 setInterval 的情况下淡入文本？有没有 CSS 方法可以做到这一点？
在没有 DNS 调用的情况下加载 Javascript 和 CSS 文件