Проблема макета CSS с четырьмя столбцами в контейнере - PullRequest
Новая
       2

Проблема макета CSS с четырьмя столбцами в контейнере

0 голосов
/ 02 июля 2010

У меня проблема с макетом.Я пытаюсь сделать макет, который имеет заголовок, опору и контейнер.Внутри контейнера есть 4 элемента div с именами Left_bar, Right_bar, file_view и main_content.

Верхний и нижний колонтитулы установлены на фиксированную высоту.Но я хочу, чтобы контейнер был высотой минимум 500 пикселей и был бы выше, если это необходимо.Я попытался установить для контейнера минимальную высоту: 500 пикселей и все элементы div внутри контейнера слишком высокие: 100%, это не сработало.

Что было бы лучшим способом для достижения этой цели.По сути, контейнер должен изменять высоту в соответствии с константами в div main_content.Все остальные элементы div в контейнере должны иметь одинаковую высоту.

См. Следующий код и снимок экрана

альтернативный текст http://www.freeimagehosting.net/uploads/51b9ba3e38.jpg

<html>
<head>
<title></title>
</head>
<body>
<form>

<style type="text/css">

body
{
    padding: 0px;
    width:1000px;
    margin: 0px auto;
    margin-top:5px;
}

#header
{
    background: red;
    height: 30px;
    margin-bottom:5px;
    font-size:30px;
    text-align:center;
    border:solid 1px;
}

#left_bar
{
    background: blue;
    width:40px;
    float:left;
    margin-right:5px;
    border:solid 1px;
    height:100%;
}

#file_view
{
    background: yellow;
    width:150px;
    float:left;
    margin-right:5px;
    border:solid 1px;
    height:100%;
}

#main_contant
{
    background: orange;
    float:left;
    width:747px;
    margin-right:5px;
    border:solid 1px;
    height:100%;
}

#right_bar
{
    background: cyan;
    width:40px;
    float:right;
    border:solid 1px;
    height:100%;
}

#footer
{
    background: purple;
    height: 20px;
    clear:both;
    text-align:center;
    color: white;
    border:solid 1px black;
}

#container
{
    height:500px;
    margin-bottom:5px;
}

#clear
{
    clear:both;
}

</style>

<div id="header">Header</div>

<div id="container"> 
<div id="left_bar">Left bar</div>
<div id="file_view">File view</div>
<div id="main_contant">Main contant</div>
<div id="right_bar">Right bar</div>
<div id="clear"></div>
</div>

<div id="footer">Þetta er footer fyrir síðuna</div>

</form>
</body>
</html>

1 Ответ

0 голосов
/ 07 сентября 2010

Похоже, что это невозможно для чистого CSS версии 1 и 2. Требуется немного javascript.Вот рабочее решение с небольшим javascript и несколькими незначительными изменениями в ваших html и css. 

<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">

body
{
    padding: 0px;
    width:1000px;
    margin: 0px auto;
    margin-top:5px;
}

#header
{
    background: red;
    height: 30px;
    margin-bottom:5px;
    font-size:30px;
    text-align:center;
    border:solid 1px;
}

#left_bar
{
    background: blue;
    width:40px;
    float:left;
    margin-right:5px;
    border:solid 1px;
    height:100%;
}

#file_view
{
    background: yellow;
    width:150px;
    float:left;
    margin-right:5px;
    border:solid 1px;
    height:100%;
}

#main_contant
{
    background: orange;
    float:left;
    width:747px;
    margin-right:5px;
    border:solid 1px;
    height:auto;
    min-height: 500px;
}

#right_bar
{
    background: cyan;
    width:40px;
    float:right;
    border:solid 1px;
    height:100%;
}

#footer
{
    background: purple;
    height: 20px;
    clear:both;
    text-align:center;
    color: white;
    border:solid 1px black;
}

#container
{
    margin-bottom:5px;
}

#clear
{
    clear:both;
}

</style>

    <form>
    <div id="pagecontainer">
    <div id="header">Header</div>

    <div id="container"> 
            <div id="left_bar">Left bar</div>

            <div id="file_view">File view</div>
            <div id="main_contant">
                                cMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contant cMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contant  cMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contant cMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contant cMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contant cMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contant cMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contantcMain contant Main contantMain contantMain contantMain contantMain contantMain contantMain contant
            </div>
            <div id="right_bar">Right bar</div>
        <div id="clear"></div>
</div>

    <div id="footer">Þetta er footer fyrir síðuna</div>
    </div>
    </form>

</body>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
//Get the height of the middle div and adjust others
var level = $("div#main_contant").height();
$("div#left_bar").height(level);
$("div#left_bar").height(level);
$("div#file_view").height(level);
$("div#right_bar").height(level);
</script>
</html>

Я использовал библиотеку Jquery для чтения высоты содержимого div (с переменной высотой) и настройкивысоты других дивов соответственно.Вы можете заметить, что настройка высоты иногда занимает некоторое время во время перезагрузки страницы, но если поместить библиотеку на тот же сервер, что и код, это произойдет достаточно быстро.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...