Zac*_*iaz 6 html css layout html5 css3
简单的问题,虽然显然不是一个简单的解决方案.
基本上该站点由两列组成,虽然没有包装或类似的东西,因为我真的很喜欢尽可能少的部分,部分是为了简单起见,但也使用HTML5语义在我看来,无论它们被命名得多么合适,我都不会真正包含div.
但是,我想让侧边栏填满相邻列的整个高度,这并不像我原先想象的那么容易.我知道这是一个老问题,但我确信我之前已经解决了.
无论如何,我试图弄清楚如何在不使用包装器或JavaScript的情况下完成它.JavaScript是不行的,但这是另一个故事.我确信会有某种智能的CSS3功能或类似功能,可以解决我的问题,而不需要包装器,但我对这个需要功能的搜索是一个史无前例的失败.
所以我对自己说:"该死的!好吧,那就必须使用包装纸."
我确信它会起作用.我尝试了不同的配置,但不管我做了什么,如果不设置周围包装的绝对高度,我就无法工作.想象一下我的失望,当我确定以前做过它时再次失败.所以我再次寻找满足我需求的解决方案.虽然这次出现了更多的材料,但仍然是一个失败.我发现的几个解决方案至少可以说是有问题的.
所以,现在我又回到了这里,又问了另外一个问题,这些问题无疑已被问过数千万次.对此我很抱歉,但我真的不知道还能去哪里.
我希望你能提供帮助.
在此先感谢您的问候.
编辑:
这完全符合我的要求:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
margin: 0 auto;
width: 800px;
}
#wrapper {
position: relative;
width: 800px;
}
body > header, body > footer {
background-color: red;
width: 800px;
}
#wrapper > article {
margin-right: 200px;
width: 600px;
background-color: blue;
}
#wrapper > aside {
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 200px;
background-color: green;
}
</style>
</head>
<body>
<header>This is a header</header>
<div id="wrapper">
<article>
This is the content<br /><br /><br /><br />left<br /><br /><br /><br />left
</article>
<aside>
And this is the sidebar! I dynamically make myself bigger based on the content on the left!
</aside>
</div>
<footer>This is a footer</footer>
</body>
</html>
唯一的问题就是摆脱那个该死的div标签;)
编辑:css表显示属性已经指出给我,它似乎是我正在寻找的,作为智能解决方案,但在一行中有多个元素,而在另一行中只有一个,我可以'弄清楚应该怎么做.
如果不要求IE6兼容性,那么我通常会做以下html:
<div class="container">
<div class="content">
This is the content
</div>
<div class="sidebar">
And this is the sidebar! I dynamically make myself bigger based on the content on the left!
</div>
</div>
这是CSS:
.container { position:relative; }
.content {margin-right:<SIDEBAR WIDTH HERE>;}
.sidebar {position:absolute; top:0; bottom:0; right:0; width:???; }
JSFiddle示例:http://jsfiddle.net/geC3w/
这适用于所有现代浏览器和Internet Explorer 7及更高版本,只要IE6兼容性不是必需的,它也非常简单
| 归档时间： |
|
| 查看次数： |
9240 次 |
| 最近记录： |