Div ширина контейнера минус нав DIV

100% У меня есть следующий код:Div ширина контейнера минус нав DIV

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    <title></title> 
    <style type="text/css"> 
    body {margin: 0; padding: 0} 

    .left { 
     background-color: yellow; 
     width: 200px; 
     height: 100%; 
     position: fixed; 
    } 

    .right { 
     background: green; 
     height: 3000px; 
     left: 200px; 
     right: 0px; 
     position: absolute; 
    } 
    </style> 
</head> 

<body> 
    <div class="left">d</div> 
    <div class="right">dafsdsfsdafkdasfjdslkfja;jdfsklsfdjaklfjdkafsjklsdjkfajklfdaksjlfjlsdsfjasdfkjldsa;fksdalfjdsafjdksa;lfjsdlfjaslfdjsafhdasjfhdsakjfhdsakjfjkadsflasfdfadfasfdasfdsfasfdasfdsaadfkljdsalfsafdsafdsaf</div> 
</body>

Который оказывает следующие result. Как изменить размер правого div, чтобы заполнить весь экран за вычетом ширины левого div, который равен 200px? В настоящее время он переполняет ширину экрана, и я не знаю, почему!

Заранее спасибо.

источник

2012-02-08 jacktheripper

вам нужно, чтобы они имели абсолютную позицию? –

Возможно, вы сможете использовать относительную ширину вместо абсолютной. Попробуйте установить 'width: 20%;' to .left и 'width: 80%;' to .right –

Это не дает правильного результата либо – jacktheripper

Я нашел элегантное решение, и его можно найти here

источник

2012-02-10 16:51:35 jacktheripper

Ваш текст в div.right слишком длинный. Таким образом, вы можете использовать

word-wrap: break-word;

также

right: 200px;

см in jsfiddle

источник

2012-02-08 23:18:14 sbagdat

Это не работает при изменении размера браузера. – jacktheripper

это работает для меня. – sbagdat

Проблема заключается в том, что вы вводите nonspaced строку так навигатор dosn't знаю, как отобразить его в нескольких линии вы можете добавить css word-wrap: break-word;, чтобы решить эту проблему.

это ваш пример изменения:

http://jsfiddle.net/q4kwy/3/

источник

2012-02-08 23:22:34

Все дело в том, что он должен быть на 100% остальной шириной, хотя – jacktheripper

это так, но если вы не скажете навигатору сломать длинные слова, которые они переполнят, используя свойство word-wrap: break-word; вы говорите навигатору сломать длинное слово, чтобы они поместились в div, если я не буду хорошо разбираться в себе, пожалуйста, сообщите –

Div ширина контейнера минус нав DIV

ответ

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