Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Колонки с отступами во всю высоту окна / 8 сообщений из 8, страница 1 из 1
18.07.2013, 09:04
    #38335053
xPhoenix
xPhoenix
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Колонки с отступами во всю высоту окна
Здравствуйте!
Верстаю дизайн, хочу сделать нечто похожее на окно Проводника Windows, т. е. слева панель категорий в виде дерева, а оставшееся место под контент. Но при этом хочу сделать так, чтобы при заполнении дерева категорий полоса прокрутки появлялась в ней, а не на всей странице. После чтения интернета сделал так:
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
<!DOCTYPE html>
<html>
<head>
    <style>
        html {
            height: 100%;
            display: block;
        }
        body {
            height: 100%;
            padding: 0;
            margin: 0;
            background-color: gray;
        }
        .content {
            height: 100%;
            display: block;
            height: 100%;
            min-height: 100%;
            background-color: white;
            
        }
        
        .inline_div{
            heigth: 100%;
            width: 200px;
            background-color: orange;
            min-height: 100%;
            display: block;
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="inline_div">
        
        </div>
    </div>
</body>
</html>


Почти всё хорошо, но стоит только добавить отступы (неважно, padding или margin) по высоте для любого блока внутри div'а с классом content, сразу же появляется вертикальная полоса прокрутки в всей страницы. Что нужно сделать, чтобы полоса прокрутки не появлялась, и страница не удлинялась при добавлении отступов к содержимому?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.07.2013, 09:25
    #38335068
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Колонки с отступами во всю высоту окна
xPhoenix , у меня встречный вопрос... В чем тайный смысл блочным элементам совать

Код: css
1.
display: block;
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.07.2013, 09:33
    #38335075
xPhoenix
xPhoenix
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Колонки с отступами во всю высоту окна
krvsa, это стандартный прием, называется "Сброс значений по умолчанию", можно почитать здесь .
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.07.2013, 09:38
    #38335078
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Колонки с отступами во всю высоту окна
xPhoenixхочу сделать нечто похожее на окно Проводника Windows
...
Что нужно сделать, чтобы полоса прокрутки не появлялась, и страница не удлинялась при добавлении отступов к содержимому?
Как вариант...

 
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
html,
body {
	width: 100%;
	height: 100%;
}
.container {
	position: relative;
	height: 100%;
	background-color: white;
}
.left {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 200px;
	background-color: orange;
	overflow: scroll;
}
.content {
	position: absolute;
	top: 0;
	left: 200px;
	right: 0;
	height: 100%;
	background-color: blue;
	overflow: scroll;
}
p {
	margin: 10px;
	padding: 10px;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
	<div class="left">
		<p>
			Служба Яндекс.Рефераты предназначена для студентов и школьников, дизайнеров 
			и журналистов, создателей научных заявок и отчетов — для всех, кто относится 
			к тексту, как к количеству знаков.
		</p>
		<p>
			Нажав на кнопку «Написать реферат» вы лично создаете уникальный текст, 
			причем именно от вашего нажатия на кнопку зависит, какой именно текст 
			получится — таким образом, авторские права на реферат принадлежат только вам.
		</p>
		<p>
			Теперь никто не сможет обвинить вас в плагиате, ибо каждый текст Яндекс.
			Рефератов неповторим.
		</p>
		<p>
			Текстами рефератов можно пользоваться совершенно бесплатно, однако при 
			транслировании и предоставлении текстов в массовое пользование ссылка на 
			Яндекс.Рефераты обязательна	
		</p>
	</div>
	<div class="content">
		<p>
			Служба Яндекс.Рефераты предназначена для студентов и школьников, дизайнеров 
			и журналистов, создателей научных заявок и отчетов — для всех, кто относится 
			к тексту, как к количеству знаков.
		</p>
		<p>
			Нажав на кнопку «Написать реферат» вы лично создаете уникальный текст, 
			причем именно от вашего нажатия на кнопку зависит, какой именно текст 
			получится — таким образом, авторские права на реферат принадлежат только вам.
		</p>
		<p>
			Теперь никто не сможет обвинить вас в плагиате, ибо каждый текст Яндекс.
			Рефератов неповторим.
		</p>
		<p>
			Текстами рефератов можно пользоваться совершенно бесплатно, однако при 
			транслировании и предоставлении текстов в массовое пользование ссылка на 
			Яндекс.Рефераты обязательна	
		</p>
	</div>
</div>
</body>
</html>

...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.07.2013, 09:39
    #38335079
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Колонки с отступами во всю высоту окна
xPhoenixэто стандартный прием
Сразил наповал!!!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.07.2013, 09:52
    #38335097
skyANA
skyANA
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Колонки с отступами во всю высоту окна
xPhoenixkrvsa, это стандартный прием, называется "Сброс значений по умолчанию", можно почитать здесь .
А можно почитать здесь Тег <div>Элемент <div> является блочным элементом и предназначен...потом почитать здесь display Значение
block

Описание
Элемент показывается как блочный.и посмеяться над фразой про стандартный прием.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.07.2013, 10:00
    #38335108
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Колонки с отступами во всю высоту окна
xPhoenixназывается "Сброс значений по умолчанию", можно почитать здесь .
Что-то я там не нашел ничего про
Код: css
1.
display: block;
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
18.07.2013, 14:15
    #38335609
xPhoenix
xPhoenix
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Колонки с отступами во всю высоту окна
krvsa, действительно, с display:block маху дал. Ггггг, во всех видеокурсах и книгах советую прям в начале писать это. За шаблон спасибо, это как раз то, что мне и надо было. Сейчас немного допилю под себя, и можно жить.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Колонки с отступами во всю высоту окна / 8 сообщений из 8, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 311ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1448106]:
 0ms
get settings:
 10ms
get forum list:
 10ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 36ms
get topic data:
 6ms
get forum data:
 2ms
get page messages:
 25ms
get tp. blocked users:
 1ms
others: 217ms
total:  311ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]