Разверните тег <div>внизу страницы с помощью CSS - PullRequest
Новая
       3

Разверните тег <div>внизу страницы с помощью CSS

2 голосов
/ 15 июня 2010

Я знаю, что этот вопрос часто задают, потому что я посмотрел на множество «решений», пытаясь заставить это работать на меня. Я могу заставить его работать, если я взломаю HTML, но я хочу использовать весь CSS. Все, что мне нужно, это заголовок с двумя столбцами под ним, и я хочу, чтобы эти три элемента заполнили всю страницу / экран, и я хочу сделать это с помощью CSS, без фреймов или таблиц. Пользовательский интерфейс XAMPP выглядит именно так, как я хочу, чтобы моя страница выглядела, но опять же, я не хочу использовать фреймы. Я не могу заставить две колонки оранжевого цвета доходить до нижней части экрана. У меня есть, так что похоже, что правый столбец простирается до нижней части экрана, просто меняя цвет фона тела на тот же цвет, что и цвет фона правого столбца, но я бы хотел, чтобы оба столбца были расширены до нижнего Я не должен был этого делать. Вот то, что я имею до сих пор:

HTML 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>MY SITE</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="container">
<div id="masthead">
    MY SITE</div>
    <div id="left_col">
        Employee Management<br />
        <a href="Employee%20Management.php">Add New Employee</a><br />
        <a href="Employee%20Management.php">Edit Existing Employee</a><br />
        <br/>
        Load Management<br />
        <a href="Load%20Management.php">Log New Load</a><br />

        <a href="Load%20Management.php">Edit Existing Load</a><br />
        <br/>
        Report Management<br />
        <a href="Report%20Management.php">Employee Report</a><br />
        <a href="Report%20Management.php">Load Report</a></div>


    <div id="page_content">
        <div id="page_content_heading">Welcome!</div>
        Lots of words</div>
</div>
</body>

</html>

CSS 

#masthead {
    background-color:#FFFFFF;
    font-family:Arial,Helvetica,sans-serif;
    font-size:xx-large;
    font-weight:bold;
    padding:30px;
    text-align:center;
}
#container {
    min-width: 600px;
    min-height: 100%;
}
#left_col {
    padding: 10px;
    background-color: #339933;
    float: left;
    font-family: Arial,Helvetica,sans-serif;
    font-size: large;
    font-weight: bold;
    width: 210px;
}
#page_content {
    background-color: #CCCCCC;
    margin-left: 230px;
    padding: 20px;
}
#page_content_heading {
    font-family:Arial,Helvetica,sans-serif;
    font-size:large;
    font-weight:bold;
    padding-bottom:10px;
    padding-top:10px;
}
a {
    color:#0000FF;
    font-family:Arial,Helvetica,sans-serif;
    font-size:medium;
    font-weight:normal;
}
a:hover {
    color:#FF0000;
}

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    background-color: #CCCCCC;
}

Ответы [ 2 ]

1 голос
/ 15 июня 2010

Ну, это ваш код был изменен , чтобы соответствовать тому, что вы хотите: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>MY SITE</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <style type="text/css">
        html, body {padding:0;margin:0;background-color:#CCCCCC;height:100%;}
        #hd{position:absolute;top:0;left:0;width:100%;height:100px;background-color:green;z-index:1;}
        #col{float:left;width:230px;height:100%;background-color:red;}
        #bd{width:100%;height:100%;background:pink;}
        .content{padding:100px 0 0 230px;}
    </style>
    </head>
    <body>
        <div id="hd">MY SITE</div>
        <div id="col">
            Employee Management<br />
            <a href="Employee%20Management.php">Add New Employee</a><br />
            <a href="Employee%20Management.php">Edit Existing Employee</a><br />
            <br/>
            Load Management<br />
            <a href="Load%20Management.php">Log New Load</a><br />

            <a href="Load%20Management.php">Edit Existing Load</a><br />
            <br/>
            Report Management<br />
            <a href="Report%20Management.php">Employee Report</a><br />
            <a href="Report%20Management.php">Load Report</a>
        </div>
        <div id="bd">
            <div class="content">
                Lots of words
            </div>
        </div>
    </body>
</html>

Пожалуйста, обратите внимание, что внутри контейнеров, таких как тот, что на теле div, может потребоваться для правильного форматаиз ваших HTML-элементов!

Надеюсь, это поможет ...:)

1 голос
/ 15 июня 2010

Как то так должно работать 

<div id="header" style="position:absolute; top:0px; left:0px; height:100px; width:100%; overflow:hidden; background-color:#00FF00">
</div>
<div id="leftnav" style="position:absolute;top:100px; left:0px; width:100px; bottom:0px; overflow:auto;background-color:#0000FF">

</div>
<div id="content" style="position:absolute;top:100px; left:100px; bottom:0px; right:0px; overflow:auto;background-color:#FF0000">
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...