说我有以下CSS和HTML代码:
#header {
height: 150px;
}<div id="header">
<h1>Header title</h1>
Header content (one or multiple lines)
</div>标题部分是固定高度,但标题内容可能会更改.我想将标题的内容垂直对齐到标题部分的底部,因此最后一行文本"粘贴"到标题部分的底部.
因此,如果只有一行文字,那就像:
-----------------------------
| Header title
|
|
|
| header content (resulting in one line)
-----------------------------
如果有三行:
-----------------------------
| Header title
|
| header content (which is so
| much stuff that it perfectly
| spans over three lines)
-----------------------------
怎么能在CSS中完成？
在下面显示的标记中,我试图让内容div一直延伸到页面的底部,但只有在显示内容时它才会拉伸.我想这样做的原因是,即使没有任何内容要显示,垂直边框仍会显示在页面下方.
这是我的HTML:
<body>
<form id="form1">
<div id="header">
<a title="Home" href="index.html" />
</div>
<div id="menuwrapper">
<div id="menu">
</div>
</div>
<div id="content">
</div>
我的CSS:
body {
font-family: Trebuchet MS, Verdana, MS Sans Serif;
font-size:0.9em;
margin:0;
padding:0;
}
div#header {
width: 100%;
height: 100px;
}
#header a {
background-position: 100px 30px;
background: transparent url(site-style-images/sitelogo.jpg) no-repeat fixed 100px 30px;
height: 80px;
display: block;
}
#header, #menuwrapper {
background-repeat: repeat;
background-image: url(site-style-images/darkblue_background_color.jpg);
}
#menu #menuwrapper {
height:25px;
}
div#menuwrapper {
width:100% …