Нужна таблица, чтобы вместить весь экран в div с другим фиксом ширины div - PullRequest
Новая
       1

Нужна таблица, чтобы вместить весь экран в div с другим фиксом ширины div

0 голосов
/ 11 августа 2010

У меня есть следующий HTML. 

<body>

<div class="header"></div>

<div class="navdiv"></div>

<div class="mainarea">

<p></p>
<table>
  <tr>
    <th scope="row">Name</th>
    <th scope="row">Description</th>
    <th scope="row">Created</th>
    <th scope="row">Created By</th>
    <th scope="row">Modified</th>
    <th scope="row">Modified By</th>
  </tr>
</table>

</div>

</body>

Мне нужна помощь с CSS, чтобы правильно структурировать страницу.

Я хочу, чтобы заголовок был на 100% сверху, что я могу сделать.

Но я хочу, чтобы "navdiv" был фиксированным 250px в левой части страницы. Затем с div "mainarea", занимающим оставшуюся часть страницы справа от navdiv. Затем я также хочу, чтобы таблица растягивалась на остальной части страницы.

Я пробовал несколько вариантов и некоторую работу, однако я не могу заставить таблицу растягиваться через остальное пространство, она просто либо прыгает ниже навигационной панели, либо слишком далеко заходит за другим контентом, либо только вмещается в контент внутри это.

Может кто-нибудь помочь?

Ответы [ 4 ]

2 голосов
/ 11 августа 2010

Это должно работать: 

.header { width: 100%; }
.navdiv { width: 250px; float: left; height: 400px; background-color: #F00; }
.mainarea { overflow: hidden; position: relative; border: solid 1px #000; }
.mainarea table { width: 100%; border: solid #F00 1px; }
/** hacks for IE6 **/
* html .mainarea { margin-left: 260px; }
* html .mainarea table { float: right; clear: none;  }

Объяснение:

Я использую стандартный трюк с двумя столбцами overflow: hidden, чтобы заставить основной контентоставайтесь в своей собственной колонке (в отличие от переноса под навигацией).position: relative для основного содержимого - установить его в качестве родительского смещения таблицы, поэтому мы можем использовать width: 100% для таблицы, чтобы увеличить ширину основной области.

Высота навигации,цвет фона и границы приведены только в демонстрационных целях.

На хаки:

Ни один другой (современный) браузер не требует margin-left: 260px, так как он покрытoverflow: hidden (заставляя его в две колонки).

Тем не менее, в этот момент, кажется, таблица очищается до основания навигационной панели (опять же, только в IE6).Чтобы решить эту проблему, удалите все значения по умолчанию (не уверен, что это необходимо) и переместите их вправо, чтобы они не учитывали размер nav.

0 голосов
/ 11 августа 2010

Попробуйте это:? 

.header{
  width:100%;
  overflow:hidden;
  }

.navdiv{
  width:250px;
  float:left;
  clear:none;
  margin:0 10px 0 0;
  }

.mainarea{
  float:left;
  clear:none;
  overflow:hidden;
  }

.mainarea table{
  width:100%;
  float:left;
  clear:none;
  }
0 голосов
/ 11 августа 2010

Вы можете использовать следующий код.Я обернул твой код другим div с классом-оберткой.Вы можете изменить значения.Класс navdiv имеет 250 пикселей по вашему желанию.Вы должны изменить ширину основной площади в процентах.Это в соответствии с шириной обертки.Просто поиграйте немного, и вы найдете правильный процент, соответствующий ширине обертки. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>stackoverflow code</title>
<style>

.wrapper {
    width:900px;
    height:400px;
}

.header {
    width:900px;
    height:100px;
}

.navdiv {
    width:250px;
    float:left;
    height:100px;
}

.mainarea {
    width:72%;
    float:left;
    height:100px;
}

</style>
</head>

<body>
<div class="wrapper">
<div class="header"></div>

<div class="navdiv"></div>

<div class="mainarea">

<p></p>
<table>
  <tr>
    <th scope="row">Name</th>
    <th scope="row">Description</th>
    <th scope="row">Created</th>
    <th scope="row">Created By</th>
    <th scope="row">Modified</th>
    <th scope="row">Modified By</th>
  </tr>
</table>

</div>
</div>
</body>

</html>
0 голосов
/ 11 августа 2010

Попробуй что-нибудь подобное, (не проверено) 

#header{
  width: 100%;
}
#navdiv{
  width: 250px;
  float: left;
}
#mainarea{
  width: 100%;
  float:left;
  margin-left: 260px;
}
table{
  width: 100%;
  float: left;
  clear: left;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...