css poinging: установить ширину боковой панели, меняя ширину окна содержимого

-1

Я пытаюсь сделать так, чтобы поле содержимого (Div) автоматически изменилось при изменении ширины браузера.css poinging: установить ширину боковой панели, меняя ширину окна содержимого

Боковая панель имеет заданную ширину.

index.html:

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="style.css"> 
    </head> 
    <body> 
     <div id="Wrapper"> 
      <div id="header"> 
       Stuff 
      </div> 

      <div id="sidebar"> 
       Text<br/>Sidebar 
      </div> 

      <div id="content"> 
       Stuff<br/>text<br/>Just to fill some space 
      </div> 

      <div id="footer"> 
       Stuff 
      </div> 
     </div> 
    </body> 
</html>

style.css:

#wrapper{ 
    width:90%; 
} 
#header{ 
    width:100%; 
    height:50px; 
    background-color:lightblue; 
} 
#content{ 
    /* *** I want something that will change width to fill blank space when the user re-sizes the browser and the sidebar moves *** */ 
    margin-top:4px; 
    background-color:yellow; 
} 
#sidebar{ 
    width:100px; 
    float:right; 
    margin-top:4px; 
    background-color:pink; 
} 
#footer{ 
    width:100%; 
    height:40px; 
    margin-top:4px; 
    background-color:red; 
}

Обратите внимание, что это просто код, который я написал во время написания этого вопроса. Все, что я сделал, было упущено дополнительного кода, который не имеет отношения к вопросу.

Это должно (не проверено) показать заголовок сверху, а нижний колонтитул внизу.

Часть, с которой мне нужна помощь, - это средняя часть.

Когда ширина браузера изменяется (меньше), боковая панель останется справа.

Я хочу, чтобы поле «#content» автоматически передислоцировалось так, чтобы между полем «#content» и «#footer» был пробел.

Я пробовал css width% values, но это не работает.

Может ли css сделать это?

Если нет, могу ли я получить php или javascript, которые могут это сделать?

источник

2013-12-02 KiraNakari

Просто укажите '# content'' margin-right' '100px' или' 104px', если вы хотите пробел '4px'. http://jsfiddle.net/urEbY/ – gaynorvader

добавить overflow: hidden в #content. это заставляет использовать «отдых» ширины, ширину браузера минус 100 пикселей для боковой панели.

, если вы хотите иметь дополнительный ГСЗ между боковым и вашим фактическим содержанием, добавьте следующую строку в #content:

бокс-проклейке: пограничный ящик; padding-right: 20px;/* (Или любой другой) */

скрипку: http://jsfiddle.net/urEbY/1/

источник

2013-12-02 14:15:11

wont 'скрытый' скрыть содержимое, что не требуется ??? – NoobEditor

Это не даст промежутка между боковой панелью и контентом. – gaynorvader

дайте ему попробовать. он просто скрывает контент за пределами #content, который является общей привычкой в сочетании с float (используется для многоколоночных макетов). он не скрывает contnt внутри него! и он будет defenitely сделать промежуток между содержанием внутри #content (не видно с желтым фоном, как пространство внутри #content! нет необходимости для downvote без попытки –

Fiddle:http://jsfiddle.net/logintomyk/fQPse/

HTML (что вам нужно ammend):

<div id="content"> 
       <p> <!-- add a paragrap --> 
         Stuff<br/>text<br/>Just to fill some space 
       </p> 
      </div>

CSS (что вам необходимо изменить):

#content >p {margin-right:100px;margin-top:0px}

источник

2013-12-02 14:23:40 NoobEditor

Добавление абзаца - хорошая практика. Желтый 'div' будет по-прежнему появляться позади и под боковой панелью, но, возможно, это то, чего хочет искатель. +1 – gaynorvader

добавление абзаца является безусловным, но, главное, у вас больше контента, чем только один пункт. и добавление маржи - право на всех из них довольно волнует, не так ли? –

@RiaElliger: обратите внимание, что есть боковая панель размером 100 пикселей в правой части 'content' ... вам не понравится, что ваш' p' будет перекрываться с боковой панелью ... будет ли у вас ??? :) – NoobEditor

css poinging: установить ширину боковой панели, меняя ширину окна содержимого

ответ

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