0

私はウェブサイトを作成しています。これには、左側にメニュー バーがあり、その横にメイン コンテンツがあります。問題は、メイン パーツにプレーン テキスト以外のものが含まれている場合、そのサイズが左側のメニュー バーの開始点に影響を与えることです。これがスクリーンショットです: http://kepmegosztas.com/img/0c8013ce70931aad975d91fd76c1cb3e/site.png 「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;
}

これを解決する方法について何か提案はありますか? 前もってありがとう、タマス

4

1 に答える 1

0

内のテキストエリアdiv#row。それを分離すれば大丈夫です。別の解決策としてdiv#left、上部を修正して高さを設定します

div#leftとをdiv#mainとして設定するtable-cellため、サイズを変更するときは同じ高さである必要があります。解決策として、内部に追加のレイヤーを追加してそのdiv#left位置を設定するか、垂直セルにまたがることを試みることができますが、それがレイヤーで機能するとは思われませんでした。たぶんの設定は親切vertical-alignですdiv#left

于 2013-01-22T11:33:07.837 に答える