2014-02-05 2 views
-4

Итак, я пытаюсь создать простой заголовок/контент, где часть содержимого распространяется на нижнюю часть окна. Выполнение этого с CSS выглядит невозможным, не вводя слишком много сложностей, учитывая, насколько прост этот макет.Заголовок/контент-страница с содержимым div, заполняющим свободное пространство

Пожалуйста скажите мне одну причину, почему я не должен делать это

body, html { height: 100%; padding: 0; margin: 0; } 
#h{ height: 150px; } 
#tbl { height: 100%; } 

<table id="tbl" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td id="h">header</td> 
    </tr> 
    <tr> 
    <td>content</td> 
    </tr> 
</table> 

И не говорите мне о семантике и как таблицы не были сделаны для разметки. Кажется, что большинство веб-дизайнеров сегодня являются мазохистами, которые ежедневно проводят часы, пытаясь построить простые макеты очень сложными способами, потому что им нравится мучить себя вещами, которые не имеют значения. Я слышал, как вы уже говорили «Но ... но ... Джон, используя divs вместо таблиц, - это последнее дело в хип-хопе, вы не хотите, чтобы нас издевались над другими веб-дизайнерами?»

+0

Sooo .. таблица макетов ... Да ... не делайте этого. (Да, я прочитал вопрос, просто нужно было сказать.) – Ruddy

+0

«последнее дело в хип-хопе». :) Подождите, это 2003? Это глупый троллинговый пост. Если вы хотите использовать таблицы, выбивайте себя. – Will

+0

Ruddy Как насчет таблиц для материала CSS не может делать или требует смехотворно глупых трюков? – John

ответ

1

Моя личная точка зрения:

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

И, конечно, we shouldn't hassle people who use table-based layouts, особенно если there's no sound, cross-browser way to do a particular layout in CSS.

Это говорит ...

1. Таблица затруднит дизайн для различных размеров экрана сразу

Отзывчивого макета важно в эти дни. Наличие разных правил CSS для разных размеров видовых экранов, применяемых к одному и тому же HTML-коду, является хорошим способом адаптации сайта ко всем экранам.

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

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

Другими словами, не так хорошо для SEO и доступности.

Однако стоит отметить, что Google has recently been optimizing its search algorithm различает таблицы макетов и таблицы данных.

И есть некоторые методы, такие как <table role="presentation">, чтобы помочь читателям экрана обрабатывать таблицы, хотя those hacks can get complicated.

3.Табличные макеты требуют изменения разметки HTML, если вы хотите изменить макет.

Опять же, это лучше и концептуально чистым - и часто более удобным для обслуживания - использовать HTML только для содержания/семантики, поэтому вы можете оставить только разметка при внесении изменений в дизайн. Но практически говоря, при существенной редизайне вам часто нужно вносить изменения в HTML.

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

2

Мы больше не используем раскладку таблиц, потому что они не являются семантическими. Боты и прошивки не могут определить, для чего подходит контент. Во-вторых, вы захотите отделить свой контент от кода для раскладки (распределение обязанностей).

Наличие внешнего файла CSS сделает вашу страницу более простой в обслуживании. Если у вас есть 20 + страницы, на которых есть таблица для хранения контента, вам, скорее всего, придется отредактировать все эти документы для редизайна. Если вы используете CSS и имеете хорошие идентификаторы ширины макета документа, вам нужно будет только изменить один .css-файл, чтобы изменить весь макет навсегда.

У вас возникли вопросы. Вы хотите иметь область содержимого под своим заголовком. Это нормально и действительно может быть разрешено с помощью более сложного CSS, если вы этого хотите, но не обязательно.

Во-первых, вы начнете ширину своего заголовка. Вы можете использовать для этого <div> или использовать элементы заголовков (h1-h6). Как будто каждый бот узнает> «О, заголовок. Это важно!»

Позволяет структурировать документ:

<body> 
<h1>Header</h1> 
<div class="static-content"> 
    <p>Content</p> 
</div> 
</body> 

У нас есть заголовок и ширина Div имени класс «статический контент» по соображениям компоновки. Вы можете изменить это имя на то, что вы хотите (без пробелов и начала ширины буквенного символа) вы также можете добавить несколько классов, разделенных пробелами.

вот некоторые CSS

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

h1 
{ 
    display: block; 
    padding: 20px 10px; 
    background-color: blue; 
    margin: 0px 0px 0px 0px; 
} 

.static-content 
{ 
    background-color: red; 
    padding: 10px; 
    margin: 0; 
} 

Зв Как вы можете видеть в скрипке здесь: http://jsfiddle.net/NicoO/rC66e/2/ Ваша область содержимого может быть красной (как есть). Но вы также видите серый фон. Элементом в фоновом режиме является body, вы можете работать с телом, как почти любой div.

Итак, вы видите, что вы уже растянули область содержимого в нижней части браузера. Если вы хотите, чтобы красная область также была внизу, у вас есть несколько вариантов для ее повторного использования.

См. Скрипку здесь: http://jsfiddle.net/NicoO/rC66e/3/ Есть и другие способы реализовать это.

Обновление.Если вы действительно хотите, чтобы красная область была большой, вы можете попробовать что-то вроде этого: http://jsfiddle.net/NicoO/rC66e/5/

Это не очень хорошее решение, потому что я не знаю, для чего вы хотите его использовать. Вы просто могли бы нарисовать элемент body, и вам хорошо идти. Если вам нужен более сложный макет, вам придется добавить свой CSS. Soltion в этой скрипке не является общим, как должно быть. Но это показывает, что вы можете делать много вещей шириной CSS. Даже если вы действительно не показали нам ваш случай использования.

Редактировать: Вы продолжаете говорить: «Почему бы мне просто не зацепить таблицу из двух строк?». Но, с другой стороны, вы пытаетесь изменить это правило для ответа здесь. Почему бы вам просто не заголовок и абзац? например <h1>Title</h1><p>content</p> Вы можете добавить фоновый цвет к элементу тела и сделать это. Здесь нет причин делать что-либо еще.

Окончательный Редактировать: У вас есть действительный пункт @John. иногда CSS может быть болью. Но он намного превосходит расположение таблиц. Для большинства распространенных проблем существуют такие инструменты, как выращенные сетчатые системы, которые устраняют большинство проблем. W3C работает над тем, чтобы сделать CSS более мощным и простым в использовании. Например, с новым дисплеем: сетка; имущество. Если вы действительно дадите css шанс и попробуйте добавить новый образец мышления о коробке, это очень поможет вам. С помощью HTML и CSS вы можете просто писать то, что вам нужно, без необходимости постоянно сталкиваться с неуклюжей таблицей. Прошу прощения, если я вас обидел. Но я бы посоветовал вам весить плюсы и минусы раскладки table vs css. Существует довольно хороший материал вокруг как адаптивным дизайном, что вы не сможете полностью использовать ширину эти старые методы

+0

Вместо этого снизу отображается нижняя часть окна. Там вы: http://jsfiddle.net/rC66e/4/ Не работает, добавьте больше обмана. – John

+0

Вы проголосовали за мой андер? Сейчас я перестану отвечать. См. Последнее редактирование. Пусть власти IE6 будут когда-либо в вашу пользу. –

+0

@NicoO Не расстраивайтесь, потому что у вас есть одно голосующее голосование. :) Я буду поддерживать ваши усилия, но ненавистники будут ненавидеть, так что вам не придется отказываться от ответа. .. –

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