Проблемы с колонкой CSS - PullRequest
Новая
       8

Проблемы с колонкой CSS

1 голос
/ 16 июля 2009

Я хочу div в левой части страницы в виде столбца и еще один div для заполнения правой части страницы. Прикрепленный мною скриншот показывает, что как в Firefox, так и в IE7 (с отключенными полосами прокрутки) два div выходят за границы экрана. Я попытался получить margin 2px со всех сторон, чтобы можно было увидеть border из div, но это не сработало.

http://img529.imageshack.us/img529/7505/29882421.jpg

CSS 

* {
  margin: 0;
}
html, form, body {
  height: 100%;
  margin:0;
  padding:0;
  font-family: "Segoe UI", "Lucida Grande", Helvetica, verdana, sans-serif;
  font-size: 11px;
  background: url(/Manage.UI/App_Themes/Default/header.png) no-repeat;
  overflow: hidden;
}
#header {
  height:162px;
  background: url(/Manage.UI/App_Themes/Default/header.png) no-repeat;
}
#left {
  top: 65px;
  border-width: 1px;
  border-style: solid;
  border-color: #c6c6c6;
  min-height:100%;
  height: auto !important;
  height: 100%;
  width:300px;
  bottom:100px;
  left: 2px;
  position: absolute;
  float:left;
  background-color: White;
}
.wrapper {
  min-height: 100%;
  width: 100%;
  height: auto !important;
  height: 100%;
  top: 0px;
  position: relative;
  margin: 2px 2px 2px 2px;
}
#right {
  top: 65px;
  border-width: 1px;
  border-style: solid;
  border-color: #c6c6c6;
  height:100%;
  width:100%;
  left: 305px;
  position: absolute;
  float:right;
  background-color: White;
}

И ASPX Page 

<body>
  <form id="form1" runat="server">
    <div class="wrapper">
      <div id="left"></div>
      <div id="right"></div>
      </div>
    </div>
  </form>
</body>

Ответы [ 2 ]

3 голосов
/ 16 июля 2009

Использовать Искусственные столбцы . Ниже приведен рабочий пример, который я создал вместе (без фонового изображения).

Кроме того, я сделал несколько изменений в вашем CSS.

  1. Для вашего CSS я создал файл reset.css для бедного человека, состоящий из 1 правила. Вы не должны использовать *, чтобы выбрать все элементы и выполнить сброс настроек, вместо этого используйте реальную reset таблицу стилей CSS .
  2. Я использовал искусственные столбцы, без фонового изображения (я оставил комментарий, где он будет)
  3. Я использовал «современный» подход для очистки поплавков для моих столбцов с quirksmode.org . Он работает во всех браузерах и поддерживает чистоту разметки.
  4. Я переименовал ваши идентификаторы столбцов. Это должно сделать вашу разметку более семантической. Ваши идентификаторы и классы должны иметь семантические имена, которые определяют контент, а не стиль. Ваш CSS определяет стиль, а не ваш HTML. Хорошая практика - держать вещи такими.

CSS: 

html, body, form, div {
    margin: 0;
    padding: 0;
    border: 0;
}
#header {
    height:80px;
    border: 1px solid #000;
}
#footer  {
    height: 80px;
    border: 1px solid #000;
}
.wrapper {
    width: 100%;
    overflow: auto;
    border: 1px solid #000;
    /* Place faux column background image rule here */
}

#nav {
    float: left;
    width: 25%;
}

#content {
    float: left;
    width: 75%;
}

И HTML: 

<head>
    <title></title>
    <link href="Core.css" rel="Stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
        <div id="header">Header</div>
        <div class="wrapper">
            <div id="nav">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <div id="conent">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
        </div>
        <div id="footer">Some footer content</div>
    </form>
</body>
</html>
1 голос
/ 16 июля 2009

РЕДАКТИРОВАТЬ: Дэн избил меня до этого.

Используйте искусственные столбцы для того же эффекта. По сути, вы создаете фоновые изображения, которые повторяются вниз, что соответствует ширине столбца (столбцов), и выглядит так, как будто они растягиваются вниз, когда этого не происходит.

Попытка создать столбцы одинаковой высоты в css без использования фиксированной высоты или других хаков не даст вам ничего, кроме боли.

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

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

...