0

自動ストレッチcontent divを追加し、コンテンツがいっぱいになったときにページに水平スクロールを追加したい。width

ここで HTML/CSS を確認できます: http://jsfiddle.net/Rknbs/

HTML

   <div id="layout">
        <div id="header">
        <h1><span id="_t13">My App</span></h1>
      <div class="username-logout">   
        <h4 class="username">Welcome <span>Admin Mahmoud </span></h4>
        <a id="logout" href="/logout">Logout</a>
      </div> 
   </div>

   <div id="content">
       <div class="div1">
          <h2>This is the contenttttttttttttttttttttttttttttttttttttttttttttttttttt</h2>
       </div>    

       <div class="tableClass">
            <table>
                 <tbody>
                      <tr>
                      <td><label>Name:</label></td>
                      </tr>
                     <td><input type="text" style="width:-moz-available"></td>
                </tbody>
            </table>
        </div>
        </div>

        <div id="footer">
           <h2>Powered By: My COMP </h2>
        </div>

        </div>

CSS

    body #layout {
    height:100%;
    width: 70%;
    position: fixed;    
    padding-left: 15%;
    padding-right: 15%;    
    margin-top: -8px;
    overflow: scroll;

}


body #layout #header{
     height:20%;  
}


body #layout #header h1 {
    margin-bottom: 3%;
    max-width: -moz-max-content;
}

body #layout #header .username-logout {
    background-color: #516170;
    height: 19%;
    color: white;  
}

body #layout #header .username-logout .username{
    margin-bottom: 0;
    float:left;
    margin-top: 0.5%;
    margin-left: 0.5%;
    font-weight:lighter;
}

body #layout #header .username-logout .username span{
    font-weight: bold !important;
}

body #layout #header .username-logout #logout {
    float: right;  
    margin-right: 0.5%;
    margin-top: 0.5%;
    color: #FFFFFF;
}


body #layout #content{
    min-height:60%;    
    border:1px solid black;
   /* background-color: #F8F8FF; */
}

body #layout #content .contentTitle{
    margin-left: 1%;
}

body #layout #content .contentTitle .welcomeHome{
    color: #516170;
}

body #layout #content #add-new-link{
    margin-left: 1%;
}

body #layout #content .submit-cancel{
    margin-left: 10%;
}

body #layout #content .submit-cancel input{
    margin-right: 1%;
}


body #layout #footer{
    height:10%;
    text-align: center;
    padding-top: 25px;
    font-size: 60%;
}

.div1{
    background-color: lavender;
    border-color: lavender;
    border-style: inset;
    border-width: thin;
    float: left;
    width: auto;
}

.tableClass{
    margin-left: 10%;
    width: 80%;
}

body #layout #content table tbody tr td{
    padding-bottom: 0.5%;    
    padding-top: 0.5%;
}
4

1 に答える 1

1

あなたは本当にそのCSSをきれいにすることができます。完全なオブジェクトパスですべてを宣言する必要はありません。

#content divの幅は、親の#layoutdivによって制御されます。#layout divの幅が固定されている場合、それは#contentdivが拡大できる幅と同じです。親コンテナよりも大きく「自動拡張」されることはありません。divを水平方向に拡大する場合は、＃layoutCSSからwidthプロパティを削除します。

とにかく...＃contentdivを水平方向にスクロールしたい場合...

#content {
min-height:60%;    
border:1px solid black;
width:100%;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}

そこにnowrap属性は必要ないかもしれませんが、私はそれを適切に投入しました。

jsfiddleを更新しました.....私がしたのは幅を削除することだけでした：70％; ボディから#layout

jsFiddleはこちら

于 2011-12-13T11:11:58.170 に答える