HTML和CSS显示表错误

我正在创建一个网站。它的左侧有一个菜单栏，旁边有主要内容。问题是如果主要部分包含其他内容而不是纯文本，则其大小会影响左侧菜单栏的起点。以下是屏幕截图： http://kepmegosztas.com/img/0c8013ce70931aad975d91fd76c1cb3e/site.png “以user1登录”应该从顶部开始，但其起点取决于textarea的大小（高度）。 textarea是可调整大小的，当我调整它的大小时，左边菜单的内容“跟随”它。HTML和CSS显示表错误

<!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; 
}

你有什么建议，如何解决这个问题？在此先感谢， Tamas

来源

2013-01-22 czappa

您的textarea里面的div#row。分开它，它会没事的。作为另一种解决方案修复div#left顶部，并设置它的高度

设置div#left和div#main为table-cell，所以他们必须调整时相同的高度。作为解决方案，您可以在div#left中添加额外的图层并为其设置位置，或者您可以尝试跨越垂直单元格，但不认为这适用于图层。也许设置为vertical-align为div#left是种

来源

2013-01-22 11:33:07 Sugar

“您的textarea在左边的div＃行中，将它分开并且它会正常。你能不能更具体一些？因为我认为textarea在div＃main里面。 – czappa

你有像'＃wrapper'->'＃row'->'＃left' +'#main'这样的结构体。因此，您需要将'＃left'从'＃main'中分离出来。当缩放textarea时，'＃row'也会缩放，并且由于'table-cell'显示，所以兄弟'div'对齐会导致单元格不能具有不同的高度 – Sugar

1）我做了以下更改：#row仅包含#main。现在我有两行，第一行包含#left，第二行包含#main 2）当我完全删除#row时，则会发生与原始文章中相同的结果（使用firefox 18.0.1） – czappa

HTML和CSS显示表错误

回答

相关问题