我正在创建一个网站。左侧有一个菜单栏，旁边有主要内容。问题是如果主要部分包含纯文本以外的内容，那么它的大小会影响左侧菜单栏的起点。 这是一个截图: http://kepmegosztas.com/img/0c8013ce70931aad975d91fd76c1cb3e/site.png “The logged in as user1”应该从顶部开始，但它的起点取决于文本区域的大小(高度)。文本区域是可调整大小的，当我调整它的大小时，左侧菜单的内容“跟随”它。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="sitestyle.css" /><title>
cim1
</title>
</head>
<body>
<div id="header">
cim2
</div>
<div id="wrapper">
<div id="row">
<div id="left">
<span>
Logged in as user1<br/>
</span>
<a href="login.php?logout=1">
(logut)<hr/>
</a>
<a href="index.php?year=2013&month=1">
2013 - 1<br/>
</a>
<a href="index.php?year=2012&month=12">
2012 - 12<br/>
</a>
</div>
<div id="main">
<span>
<form action="/site/blog.php" method="post">
<textarea name="the_text" class="blog">
</textarea>
<input value="Submit" type="submit" /></form>
</span>
</div>
</div>
</div>
</body>
</html>
CSS:
html
{
height: 100%;
}
body
{
background-color: #aabbaa;
margin: 0px;
height: 100%;
}
div#header
{
margin-left: auto;
margin-right: auto;
width: 80%;
background-color: gray;
background-color: #889988;
}
div#wrapper
{
display: table;
table-layout: fixed;
width: 80%;
height: 90%;
margin-left: auto;
margin-right: auto;
}
div#row
{
display: table-row;
}
div#left
{
display: table-cell;
width: 20%;
background-color: #ccddcc;
/*list-style: none;*/
}
div#main
{
display: table-cell;
background-color: white;
}
textarea.blog
{
resize: both;
overflow: auto;
}
你对如何解决这个问题有什么建议吗？ 提前致谢， 塔玛斯
最佳答案
div#row 内的文本区域。分开就好了。
作为另一种解决方案，将 div#left 固定到顶部并设置它的高度
您将 div#left 和 div#main 设置为 table-cell，因此在调整大小时它们必须具有相同的高度。作为解决方案，您可以在 div#left 中添加额外的图层并为其设置位置，或者您可以尝试跨越垂直单元格，但认为这不适用于图层。也许为 div#left 设置 vertical-align 比较好
关于HTML 和 CSS 显示表格错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14457529/