Ограничьте приблизительно 100%-ю высоту тела и ширину (Строгий HTML 4.01)
После просмотра множества ответов здесь я использую следующий код:
(ns app.routes
(:require [compojure.core :refer [defroutes GET]]
[ring.util.response :as resp]))
(defroutes appRoutes
;; ...
;; your routes
;; ...
(GET "/" []
(resp/content-type (resp/resource-response "index.html" {:root "public"}) "text/html"))))
- Нет перенаправлений;
- Нет необходимости в другом промежуточном программном обеспечении;
- index.html находится в нужной папке (resources / public / index.html);
- Работает с другим промежуточным ПО (многие ответы ломаются при использовании с некоторым промежуточным ПО по умолчанию);
- Он предоставляет тип контента, поэтому работает с промежуточным ПО типа wrap-content.
Проверьте кольцевые настройки по умолчанию . Он имеет лучшее программное обеспечение, которое вы должны использовать в своих проектах.
7 ответов
Как уже упоминалось в SpliFF, проблема заключается в том, что по умолчанию (W3C) блочная модель - это 'content-box', что приводит к тому, что границы выходят за пределы ширины и ] высота . Но вы хотите, чтобы они находились в пределах указанных вами 100% ширины и высоты. Одним из способов решения этой проблемы является выбор модели рамки с рамкой, но вы не можете сделать это в IE 6 и 7, не вернувшись в режим причуд.
Другое решение работает и в IE 7. Просто установите html и body на высоту 100% и overflow на hidden , чтобы избавиться от полос прокрутки окна. Затем вам нужно вставить абсолютно позиционированный div-обертку, который получает красную границу и все содержимое, установив для всех четырех свойств смещения блока значение 0 (чтобы граница прилипала к краям области просмотра ) и переполнение на auto (чтобы поместить полосы прокрутки внутри div-оболочки).
Есть только один недостаток: IE 6 не поддерживает установку как слева и справа , так и обоих вверху и внизу . Единственный обходной путь для этого - использовать выражения CSS (в условном комментарии), чтобы явно установить ширину и высоту оболочки в соответствии с размерами области просмотра за вычетом ширины границы.
Чтобы было легче увидеть эффект, в следующем примере я увеличил ширину границы до 5 пикселей:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Border around content</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
overflow: hidden;
}
#wrapper {
position: absolute;
overflow: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;
border: 5px solid red;
}
</style>
<!--[if IE 6]>
<style type="text/css">
#wrapper {
width: expression((m=document.documentElement.clientWidth-10)+'px');
height: expression((m=document.documentElement.clientHeight-10)+'px');
}
</style>
<![endif]-->
</head>
<body>
<div id="wrapper">
<!-- just a large div to get scrollbars -->
<div style="width: 9999px; height: 9999px; background: #ddd"></div>
</div>
</body>
</html>
PS: Я только что заметил, что вам не нравится overflow: hidden , Хм...
Обновление: Мне удалось обойтись с помощью overflow: hidden , подделав границу с помощью четырех блоков div, которые прилипают к краям области просмотра (вы не можете просто перекрыть всю область просмотра с помощью полноразмерный div, так как все элементы под ним больше не будут доступны). Это не очень хорошее решение, но, по крайней мере, обычные полосы прокрутки остаются в исходном положении. Я не мог позволить IE 6 имитировать фиксированное позиционирование с помощью выражений CSS (были проблемы с правым и нижним div), но все равно это выглядело ужасно, поскольку эти выражения очень дороги , а рендеринг стал утомительно медленным.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Border around content</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#border-t, #border-b, #border-l, #border-r {
position: fixed;
background: red;
z-index: 9999;
}
#border-t {
left: 0;
right: 0;
top: 0;
height: 5px;
}
#border-b {
left: 0;
right: 0;
bottom: 0;
height: 5px;
}
#border-l {
left: 0;
top: 0;
bottom: 0;
width: 5px;
}
#border-r {
right: 0;
top: 0;
bottom: 0;
width: 5px;
}
</style>
</head>
<body>
<!-- just a large div to get scrollbars -->
<div style="width: 9999px; height: 9999px; background: #ddd"></div>
<div id="border-t"></div><div id="border-b"></div>
<div id="border-l"></div><div id="border-r"></div>
</body>
</html>
You ' Мне это понравится.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
html {
height: 100%;
width: 100%;
display: table;
}
body {
display: table-row;
}
#wrapper {
display: table-cell;
border: 5px solid red;
}
</style>
</head>
<body>
<div id="wrapper"></div>
</body>
</html>
http://www.test.dev.arc.net.au/100-percent-border.html
Я подумал, поскольку таблицы сохраняют много "причудливого" поведения даже в стандартном режиме они могут быть решением. Однако превращение HTML-элемента в таблицу довольно забавно.
Прежде чем отмечать это как неработающее в IE6, подумайте, что это очень тривиальная проблема, которую нужно исправить. Дело в том, что использование алгоритма рисования таблицы является решением, и также возможно решение на чистом CSS:
<table class="outer"><tr><td class="inner"> ...page content...
Пока CSS3 не предоставит нам внутренние границы и переключение блочной модели, вам понадобится два div. Первый задает высоту 100%, а второй - границу. В противном случае граница выходит за пределы 100% высоты (т.е. 1px + 100% + 1px)
BTW. Вам следует собрать некоторую статистику, прежде чем переходить к "только IE". IE не имеет той доли рынка, которая была раньше. От 10 до 30% ваших пользователей могут использовать другие браузеры.
Вот простое решение, использующее только элементы html и body (нет необходимости во вложенных div). Он использует преимущества особого поведения элемента HTML (у него не может быть внешней границы, поэтому он должен сжиматься, чтобы отобразить его).
<html>
<head>
<style>
html {padding:0; margin:0; border:5px solid red;}
body {height:100%; padding:0; margin:0; border:0;}
</style>
</head>
<body>
</body>
</html>
Попробуйте установить границы для элемента html. Элемент body расположен ровно настолько, насколько это необходимо, но, насколько я помню, элемент html занимает все пространство (это место, где вы тоже должны установить свой фон).
Я не уверен, как выглядят границы, Я обычно устанавливаю только фон.
Граница выходит за пределы 100%. Попробуйте padding: -1px или margin: -1px .
Это также немного уродливо, но придание тела
position:relative;
top:-1px;
left:-1px;
сработало для меня.