левый div процентная ширина, справа заполняет оставшееся пространство

У меня есть левый div, плавающий слева с процентной шириной, и правый div, плавающий влево, что я хотел бы заняться оставшимся пространством, вот [скрипка]: https://jsfiddle.net/gfhfku8k/. Спасибо за любую помощь заранее.левый div процентная ширина, справа заполняет оставшееся пространство

HTML:

<div class="container"> 
    <div class="left"> 

    </div> 
    <div class="right"> 

    </div> 
</div>

CSS:

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
} 
.container { 
    width: 100%; 
    height: 100%; 
    border: 1px solid #000; 
} 
.left { 
    width: 30%; 
    height: 100%; 
    float: left; 
    border: 1px solid #000; 
    overflow: hidden; 
} 
.right { 
    height: 100%; 
    /* width: 30px; */ 
    overflow: hidden; 
    float: left; 
    border: 1px solid #f00; 
}

источник

2016-12-19 halfacreyum

Не глядя ни на что - попробовали ли вы 70% ширину справа? Конечно, вам нужно установить размер окна: border-box – smnbbrv

Вы хотите, чтобы .right div оставался полной шириной? – Vishnu

Да, я бы хотел, чтобы правый div занял оставшееся пространство, но ширина левого div изменит ширину. 30% - всего лишь пример, извините, что нужно указать. – halfacreyum

Предполагая, положив width: 70% на правой колонке не то, что вы ищете, этот вид макета наиболее легко осуществляется с flex. Вот как это работает:

Обратите внимание, что я удалил float собственности на колоннах, и добавил box-sizing: border-box ко всем элементам (*) для того, чтобы работать должным образом (хотя это не требуется для этой демонстрации).

html, 
 
body { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.container { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid #000; 
 
    /* flex */ 
 
    display: flex; 
 
} 
 
.left, 
 
.right { 
 
    border: 1px solid #000; 
 
    overflow: hidden; 
 
} 
 
.left { 
 
    background: pink; 
 
    width: 30%; 
 
} 
 
.right { 
 
    background: blue; 
 
    /* flex */ 
 
    flex-grow: 1; 
 
}

<div class="container"> 
 

 
    <div class="left"> 
 
    </div> 
 

 
    <div class="right"> 
 
    </div> 
 

 
</div>

источник

2016-12-19 05:32:19

Спасибо, за ответ. Раньше я не использовал flex, но мне обязательно нужно будет узнать об этом. – halfacreyum

Вы можете попробовать это

.right { 
    height: 100%; 
    overflow: hidden; 
    border: 1px solid #f00; 
}

Просто удалить поплавком: слева от .right класса.

источник

2016-12-19 05:41:08

левый div процентная ширина, справа заполняет оставшееся пространство

ответ

Смежные вопросы