0

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

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

你有什么建议如何解决这个问题吗？提前致谢， 塔马斯

4

1 回答 1

0

你的 textarea 里面的div#row. 分开就好了。作为另一种解决方案，固定div#left到顶部并设置它的高度

您将div#leftand设置div#main为table-cell，因此在调整大小时它们必须具有相同的高度。作为解决方案，您可以在内部添加额外的图层div#left并为其设置位置，或者您可以尝试跨越垂直单元格，但认为这不适用于图层。也许vertical-alignfor的设定div#left是亲切的

于 2013-01-22T11:33:07.837 回答