Div, чтобы заполнить оставшиеся space.CSS

Question

у меня есть этот образец

link

КОД HTML:

<div class="nav"> 
    <ul> 
    <li>Link1</li> 
    <li>Link2</li> 
    <li>Link3</li> 
    <li>Link4</li> 
    </ul> 
</div> 
<div class="right"> 
    asdasdsa 
</div> 

КОД CSS:

.nav{ 
    float:left; 
    display:inline-block; 
    width:200px; 
    background:red; 
} 
.right{ 
    background:blue; 
    width:80%; 
    float:left 
} 

Может вам пожалуйста скажи мне, как я мог оставить div div фиксированным и правую сторону синего, чтобы занять все оставшееся пространство.

Я хочу ДИВ .nav всегда 200px.

Можете ли вы сказать мне, как изменить код CSS?

Заранее благодарен!

Answer 1

Просто используйте calc:

.nav{ 
 
    float:left; 
 
    display:inline-block; 
 
    /* Apply a width of 20% for older browsers that dont have calc */ 
 
    width: 20%; 
 
    /* Apply the correct width for browsers that support calc */ 
 
    width: calc(200px); 
 
    background:red; 
 
} 
 
.right{ 
 
    background:blue; 
 
    width: 80%; 
 
    width: calc(100% - 200px); 
 
    float:left 
 
}

<div class="nav"> 
 
    <ul> 
 
    <li>Link1</li> 
 
    <li>Link2</li> 
 
    <li>Link3</li> 
 
    <li>Link4</li> 
 
    </ul> 
 
</div> 
 
<div class="right"> 
 
    asdasdsa 
 
</div>

Answer 2

гораздо проще, чем при использовании раствора calc.

Просто поместите дивы в родительском DIV и дать родителю display:flex;

Это также означает, что вы можете упростить CSS, удалив display:inline-block; и float свойства.

EDIT: используйте flex:1 вместо width:80% на втором дочернем div. Это заставит его заняться оставшимся пространством в родительском div flex.

.nav{ 
 
    width:200px; 
 
    background:red; 
 
} 
 
.right{ 
 
    background:blue; 
 
    flex: 1; 
 
} 
 
.flex{ 
 
    display:flex; 
 
}

<div class="flex"> 
 
<div class="nav"> 
 
    <ul> 
 
    <li>Link1</li> 
 
    <li>Link2</li> 
 
    <li>Link3</li> 
 
    <li>Link4</li> 
 
    </ul> 
 
</div> 
 
<div class="right"> 
 
    asdasdsa 
 
</div> 
 
</div>

Answer 3

body { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
main { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
section { 
 
    flex: 1 1 100vh; 
 
    display: flex; 
 
} 
 

 
aside { 
 
    flex: 0 0 256px; 
 
    order: 0; 
 
    background: cornflowerblue; 
 
} 
 

 
article { 
 
    flex: 1 1 100px; 
 
    order: 1; 
 
    background: crimson; 
 
}

<main> 
 
    <section> 
 
     <aside> 
 
      <nav> 
 
      <ul> 
 
       <li>Link1</li> 
 
       <li>Link2</li> 
 
       <li>Link3</li> 
 
       <li>Link4</li> 
 
      </ul> 
 
      </nav> 
 
     </aside> 
 
     <article> 
 
      asdasdsa 
 
     </article> 
 
    </section> 
 
</main>

ЛУЧШЕЕ РЕШЕНИЕ ДЛЯ современных броузерах - http://jsfiddle.net/mu748why/16/

для получения дополнительной информации зайдите сюда - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 4

#main { 
 
    width: 220px; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    display: -webkit-flex; /* Safari */ 
 
    display: flex; 
 
} 
 

 
#main div { 
 
    -webkit-flex: 1; /* Safari 6.1+ */ 
 
    -ms-flex: 1; /* IE 10 */  
 
    flex: 1; 
 
} 
 
</style>

<div id="main"> 
 
    <div style="background-color:coral;">RED</div> 
 
    <div style="background-color:lightblue;">BLUE</div> 
 
    <div style="background-color:lightgreen;">Green div with more content.</div> 
 
</div>