100% Table Height
Occasionally designers may want to center content in a web page and they want it centered both horizontally and vertically. The traditional method for doing that is to put the content into a table and to assign a values of 100% to the table’s HEIGHT attribute and center to the ALIGN attribute. Recently, that approach has become more problematic.
You may have used this before and had it work but now, for some reason, new pages you create won’t center vertically. You may be changing pages from standard HTML to XHTML and now tables don’t respect the 100% HEIGHT attribute. Read on.
There are a few things you need to know here. There is not now, nor has there ever been a HEIGHT attribute for tables. Scour the HTML specifications and you will not find HEIGHT among the attributes for the table tag. The fact is, table height is invalid code. If you attempt to validate a page where you have assigned a height to a table, it will fail. Assigning a height to the table tag is not the answer. You can, however, legally assign a height using CSS.
Rendering Modes
But why, you ask, did it used to work and now it doesn’t? Without going into a lot of specifics, the answer is that it has to do with the browser’s rendering mode as determined by the document’s DOCTYPE . You can read a lot more about that subject on Eric Meyer’s companion site for his book Eric Meyer on CSS. The point is that browsers, rendering pages in quirks mode, expand tables to fill the 100% HEIGHT . Browsers rendering pages in standards compliance mode don’t. That means that, if a page has a full and proper DOCTYPE , including the URI, or if it uses an XHTML DOCTYPE , the browser will render the page in standards compliance mode. If a page does not have a DOCTYPE , or if it has a partial DOCTYPE without the URI, the the browser will render the page in quirks mode. Newer web design software has begun inserting the full DOCTYPE in pages, so the pages get rendered in standards compliance mode.
Now don’t get ahead of me. About now, you’re thinking that all you need to do is remove the DOCTYPE and your tables will render the way you want them to. There are downsides to depending on quirks mode to render your page. Rendering pages in quirks mode, browsers use all the old bugs from prior versions, which means that you are less likely to get consistent rendering across different browsers and/or platforms. You wind up paying a hefty price to obtain your goal.
Fear not! There is a way to accomplish this, without resorting to quirks mode rendering. The answer will not make the invalid code magically become valid, but it will work in most browsers except for Internet Explorer on the Mac platorm.
Why Percentage Height Fails
Okay, to begin, maybe I should explain exactly why 100% height fails. Contrary to popular opinion, it is not because the browser ignores the invalid HEIGHT attribute. The real reason it fails is that the browser does not expand the HTML and/or BODY (depending on the browser) to fill the browser viewport. The browser is in almost all cases, in fact, rendering the table as 100% high. The problem is that it is 100% of the containing element ( HTML and BODY ), which may not be as high as the browser’s veiwport. The HTML and BODY tags represent block elements that automatically expand to fill the width of their container, which is the browser’s viewport. They do not expand vertically. That can be fixed. Consider the following CSS:
What does that do? That CSS tells the browser that the HTML and BODY elements have no padding, margin, or border and that their height is 100% of their containing elements. The containing element is the browser viewport! The margin, padding and border are set to zero because failing to do so would mean that the browser would use its default values and the margin and/or padding would be applied outside the 100% resulting in a scroll bar even when none was really needed.
Using Valid Code
If you’re interested in writing valid code, you still have a problem because, in case I failed to mention it, table HEIGHT is invalid. Now you need to decide which is more important to you, writing valid code or getting the 100% height to display in Netscape version 4. Netscape 4’s old and buggy implementation of CSS fails to render the CSS specified height.
If you can accept that NN4 will not display the 100% height, the «proper» way to do it would be to set the table height using CSS. My recommendation would be to create a ID selector in your style sheet that could be applied to a particular table. That way, you needn’t worry about all tables on the page being affected. The ID definition might look something like this:
You would then apply the fullheight ID to your table like this:
Vertical Centering
Now that we have achieved 100% height with our table, it becomes a simple matter to center content. Let’s take the following CSS:
html, body, #wrapper < height:100%; margin: 0; padding: 0; border: none; text-align: center; >#wrapper
Use the above CSS along with the following HTML:
The results
Okay, I know that this discussion has been a bit longer and more involved that my usual «examples» and the reason is that I thought it was important to understand how and why the results are what they are. Here are four examples you can look at. Each will open in a new browser window and you can view the source code to see how it’s done. The first three examples use exactly the same table markup. The last one uses CSS to style the table and set its height, which is perfectly valid.
Like I said, this technique works in almost all browsers. The exception is Internet Explorer on the Mac.
Кроссбраузерное выравнивание по центру (table height=100%)
Время от времени меня спрашивают, как заставить работать следующий код в Opera 7.0, а также в Internet Explorer 6 и Mozilla, когда страница в режиме Standards compliance mode:
Почему текст получается прижатым к верхней границе документа, вместо того, чтобы расположиться в центре? Прежде всего дело в том, что в спецификации HTML 4.01 у тега table нет атрибута height, и поэтому браузеры в режиме совместимости со стандартами (а Opera 7.0 в любом случае) его игнорируют. Но самое интересное, что они перестают его игнорировать, если в CSS указать следующую конструкцию для растягивания канвы документа:
Собственно, вам даже не нужно что-то менять в самом HTML коде, в котором у вас прописана (быть может давно, когда вы и не думали, что когда-нибудь height могут «отменить») высота таблицы.
Предвидя вопросы, хочу сделать пару замечаний по приведённому стилевому описанию.
Во-первых, нужно указывать оба элемента html и body, так как просто body недостаточно. Например, для Mozilla в Standards compliance mode канвой является именно элемент html, а не body.
Во-вторых, если убрать обнуление margin и padding, то опять же в режиме совместимости со стандартами у страницы появится неприятная вертикальная полоса прокрутки.
Ну и напоследок хочу отметить, что в любом случае документ, в котором содержится тег table с атрибутом height, не пройдёт проверку. Если уж вам будет греть душу сознание того, что ваши документы valid, советую заменить этот атрибут на CSS свойство height, не забыв, тем не менее, указать в таблице стилей приведённое выше решение для растягивания канвы.
Как с помощью css создать таблицу по центру экрана?
Как на странице, с помощью css, создать таблицу по центру экрана (по высоте и ширине)?
Таблица должна автоматически подстраиваться размер под содержимого.
Это возможно на css без js?
PS
Впрочем можно и div. Но как вы видите, он должен быть фиксированного размера.
А мне нужно, чтобы размер подстраивался под содержимое.
/* Окно ввода логина и пароля */ .log_window < top: 50%; /* Отступ в процентах от верхнего края окна */ left: 50%; /* Отступ в процентах от левого края окна */ /* width: 450px; Ширина блока */ width:240px; /* Ширина блока */ height: 120px; /* Высота блока */ position: absolute; /* Абсолютное позиционирование блока */ margin-top: -60px; /* Отрицательный отступ от верхнего края страницы, должен равняться половине ширины блока со знаком минус */ margin-left: -120px; /* Отрицательный отступ от левого края страницы, должен равняться половине высоты блока со знаком минус */ >Простой 3 комментария
width:240px; /* Ширина блока */ height: 120px; /* Высота блока */ margin-top: -60px; margin-left: -120px;
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width:100%; max-width:500px; height: 100%; max-height:300px;
К сожалению это «не работает».
(Зря я написал пример.)
Нужно просто создать div который бы подстраивал свои размеры под содержимое.
И находился в центре страницы.
Ну как обычная HTML таблица. Изменили её содержимое — она поменяла размер, подстроилась.
PavelMonro: И так тоже не будет работать
Примеры
Тут окно не расширяется под содержимое, а ограничивает содержимое.
https://jsfiddle.net/gpq9qx85/4/
Тут, с убранным max-width и max-height окно растянулось на весь экран.
https://jsfiddle.net/9kgyymf6/
Говорит что наше окно должно быть 50% от текущего размера области браузера.
Тут нет связи с содержимым внутри дива.
Мне нужно изменять окно-DIV в зависимости от изменения содержимого.
Ну мне больше нравится вариант с flex
Вот и сама верстка на slim
doctype html html head title Slim Examples meta name="keywords" content="template language" link rel="stylesheet" type="text/css" href="../session.css" media="screen" body / Вход пользователя #main_log_in form span Вхід в портал div : input * < type: :text, name: :username, placeholder: 'Користувач. ' >div : input * button$ffIcon: 'Glyphicons Halflings'; @import 'application'; #main_log_in < height: 100vh; width: 100vw; display: flex; justify-content: center; align-items: center; background-color: #666666; form < display: inline-block; width: 500px; border-radius: 3px; background-color: white; /* Заголовок */ span < display: block; width: 100%; padding-left: 15px; line-height: 43px; font-size: 16px; background-color: #d9edf7; color: #31708f; border-radius: 3px 3px 0 0; >/* Поля ввода с иконами */ div < margin: 20px 15px; position: relative; &:before < font-family: $ffIcon; position: absolute; top: 8px; left: 8px; color: #aaa; >&:nth-of-type(1):before < content: "\e008"; >/* Иконка для пользователя */ &:nth-of-type(2):before < content: "\e139"; >/* Иконка для пароля */ /* Поля ввода с иконами */ input < width: 100%; height: 34px; border-radius: 3px; border: 1px solid #e7e7e7; cursor: pointer; padding-left: 30px; &:hover:enabled < border-color: #aaa; >> > /* Базовая кнопка */ button < height: 34px; border-radius: 3px; margin: 20px 15px; border: 1px solid #2e6da4; background-color: #337ab7; color: white; cursor: pointer; &:hover:enabled < background-color: #286090; border-color: #204d74; >; &:before < content: "Натисність для входу"; >; > > >