Невозможно растянуть div, когда ширина заполнена - PullRequest
Новая
       38

Невозможно растянуть div, когда ширина заполнена

0 голосов
/ 13 декабря 2011

Я хочу добавить автоматическое растяжение 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%;
}

1 Ответ

1 голос
/ 13 декабря 2011

Вы можете действительно очистить этот CSS. Нет необходимости объявлять все с полными путями к объектам.

Ваша ширина #content div контролируется родительским div #layout. Если div #layout имеет фиксированную ширину, он настолько велик, насколько может увеличиться div #content. Он не будет "автоматически расти" больше, чем его родительский контейнер. Удалите свойство width из CSS #layout, если хотите, чтобы div растягивался по горизонтали.

В любом случае ... если вы хотите, чтобы #content div прокручивался горизонтально .... 

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

Возможно, вам не нужен атрибут nowrap, но я добавил его для хорошей меры.

обновил jsfiddle ..... Все, что я сделал, это удалил ширину: 70%; из тела № макета

jsFiddle Here

...