Question

有人可以帮助我使用此页面上的CSS吗？ http://www.thepatstudio.com/pat/

我有一个带有一定长度的侧边栏，其中包含指向页面其余部分的链接。紧挨着这是一个文本区域和背景图像。如果文本太短，我希望整个div与侧边栏的长度相同，如果文本更多，我希望底部的图像更长。我正在尝试使用高度：100％，但我似乎无法让它工作，除非我做它＆gt; 100％，如果文本长于此值，则不会更新。

<div id="x">
<div id="sidebar">
<br>
<h2>Artist Info</h2><br>
<h2>Assemblage</h2><br>
<h2>Collage</h2><br>
<h2>Blog</h2><br>
<h2>Etsy</h2><br>
<h2>Guestbook</h2><br>
<h2>Studio</h2><br>
<h2>Contact</h2><br>
<h2>Links</h2><br>
<h2>Home</h2><br></div>
<div id="txt">
<div id="title"><h2 id ="ttext">Assemblage</h2></div>
<div id="text">texttext
</div>
</div>
</div>

#sidebar {background-color:#FFFFFF;width:158px;float:left}
#txt{background-color:#000000;width:770px;position:absolute;
right:328px;}
#title{background-color:#FFFFFF;position:relative;width:151px; margin-left: 25px;padding-left:10px;padding-right:10px;top:10px;height:45px;}
#text{background-color:#FFFFFF;position:relative;margin: 25px; padding: 20px }
#ttext {padding-top: 10px}
#x {height: 100%}

Answer 1

尝试使用一些漂亮的JavaScript来动态调整高度。

这是一个使用jQuery（流行的js框架）

的简单示例

<!-- loads the jquery lib, stick this in head

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

<!--append this to the end of your script-->

<script type="text/javascript">

var sideBarHeight = $('#sidebar').height();

$('#text').height(sideBarHeight);

</script>

Answer 2

对于初学者，你不应该重复使用h2标签作为布局元素，但最好使用列表元素，因为它们是它们的用途，而标题标签在DOM中具有特定含义和排名。

我认为要创建所需的布局，您应该将其他元素浮动到主x元素中，并确保清除浮动：

http://www.positioniseverything.net/easyclearing.html

您不应对任何元素使用绝对定位，以便它们包含在同一个#x div

中

帮助css，默认情况下将div设为页面长度

2 个答案: