Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.60/15: Рейтинг темы: голосов - 15, средняя оценка - 4.60
4 / 4 / 0
Регистрация: 25.09.2012
Сообщений: 36
1

min-width max-width

25.09.2012, 23:36. Показов 2743. Ответов 3
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Помогите разобраться... Резиновый сайт с минимальной и максимальной шириной сайта. При просмотре во весь экран (с большим наполнением блока #content) всё отображается корректно, но стоит только уменьшить размер окна содержимое уходит за границу футера...
CSS
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

 #wrapper{
    min-width: 800px;
    max-width: 1360px;
    margin:auto;
    min-height:100%;
 }
 .shadow{
            padding: 15px;
    margin-bottom:30px;
    border:1px solid #cccccc;
    background-color:#FFF;
    box-shadow:1px 1px 8px #333;
    border-radius:10px;
 }
 
 #sideBarL{
    float:left;
    padding: 0;
    margin: 25px 0 0 25px;
    width: 220px;
 }
  
 #sideBarR{
    float:right;
    padding: 0;
    margin: 25px 25px 0 0;
    width: 220px;
 }
 
 #content{
    position: relative;
    margin:25px 275px 25px 275px;
    padding: 15px;
    border:1px solid #cccccc;
    background-color:#FFF;
    box-shadow:1px 1px 8px #333;
    border-radius:10px;
 }
 
 #clear{
     clear:both;
 }
 
 #footer{
     height: 100px;
     margin:0 0 5px 0;
     background-image:url(../image/footer.png);
 }

При
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 25.09.2012, 23:36
Ответы с готовыми решениями:

Адаптивная вёрстка, min-width или max-width?
В bootstrap 3 применяется сетка на основе media queries, а именно @media (min-width), НО!!!!!! ...

Адаптация дизайна.Свойства min-width и max-width
Всем привет.Возникла проблема в понимании свойств min-width и max-width.Если использовать в @media...

Заставить работать min-width,max-width в %
<table> <td class="left"> </td> <td class="middle"> </td> ...

Min-width, max-width (растолкуйте)
Значит есть такой код <div class="subscribers"><div class="subscribers__in"></div></div> ...

3
Администратор
12268 / 5333 / 268
Регистрация: 05.04.2011
Сообщений: 14,086
Записей в блоге: 2
25.09.2012, 23:57 2
html код тоже нужен
0
4 / 4 / 0
Регистрация: 25.09.2012
Сообщений: 36
26.09.2012, 11:19  [ТС] 3
HTML код:
HTML5
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

[pre]
<body>
        <div id="wrapper">
            <div id="header">
                <div id="logo"></div>
                <div id="nav">
                    <ul>
                        <li> <a href="index.php">ГЛАВНАЯ</a></li> 
                         <li> <a href="articles">СТАТЬИ</a></li>
                         <li> <a href="lessons">УРОКИ</a></li>   
                        <li> <a href="news">НОВОСТИ</a></li>
                        <li> <a href="down">ЗАГРУЗКИ</a></li>
                        <li> <a href="contacts">КОНТАКТЫ</a></li>
                    </ul>
                </div>
            </div>
            <div id="sideBarL">
                <div class="shadow">
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lacus urna, aliquam sed feugiat non, rutrum in nisl. Mauris vel nunc risus. Nullam erat urna, porta at semper ac, vestibulum eget leo. Fusce ac rutrum nulla. In bibendum risus eu quam lacinia volutpat. Aliquam vel sodales nisi. Vestibulum condimentum quam et diam tristique dignissim.
                    </p>
                    </div>
                <div class="shadow">
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lacus urna, aliquam sed feugiat non, rutrum in nisl. Mauris vel nunc risus. Nullam erat urna, porta at semper ac, vestibulum eget leo. Fusce ac rutrum nulla. In bibendum risus eu quam lacinia volutpat. Aliquam vel sodales nisi. Vestibulum condimentum quam et diam tristique dignissim.
                    </p>
                    </div>
                </div>
            <div id="sideBarR">
                <div class="shadow">
                    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin lacus urna, aliquam sed feugiat non, rutrum in nisl. Mauris vel nunc risus. Nullam erat urna, porta at semper ac, vestibulum eget leo. Fusce ac rutrum nulla. In bibendum risus eu quam lacinia volutpat. Aliquam vel sodales nisi. Vestibulum condimentum quam et diam tristique dignissim.
                    </p>
                    <p> Nulla id urna eros, sed viverra orci. Integer ut porta dolor. Maecenas eget quam libero. Vestibulum vel lectus sapien, a dignissim orci. In posuere egestas libero, id fermentum dolor vehicula in. Cras ac tempor augue. Vestibulum rhoncus auctor lectus ut auctor. In risus risus, sollicitudin eu vulputate sit amet, viverra a tortor. Ut elementum gravida ipsum a viverra. Etiam tincidunt sollicitudin vestibulum. Donec eget sapien vel lacus aliquam vehicula vitae nec erat.
                    </p>
                </div>
                </div>
            <div id="content"> &nbsp;
     Здесь расположен текст блока&nbsp;
     Здесь расположен текст блока&nbsp;
     Здесь расположен текст блока
          </div>
            <div id="clear"></div>
            <div id="footer">
            <br>
                <p>Copyright 2012 &copy; </p>
    
            </div>
        </div>
    </body>
[/pre]
0
601 / 569 / 104
Регистрация: 07.11.2010
Сообщений: 2,004
26.09.2012, 22:52 4
Цитата Сообщение от Alexstrigin Посмотреть сообщение
Помогите разобраться... Резиновый сайт с минимальной и максимальной шириной сайта. При просмотре во весь экран (с большим наполнением блока #content) всё отображается корректно, но стоит только уменьшить размер окна содержимое уходит за границу футера...
добавить overflow, чтобы не выпадал контент. + тебе надо обернуть wrapper в div и задать ему height 100%, а также тоже самое значение для body и html

Добавлено через 5 минут
CSS
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

html, body, #container {
    height: 100%;
}
 
html {
    background: #fff;
    color: #333;
}
 
* {
    margin: 0;
    padding: 0;
}
 
#container {
    min-width: 800px;
    max-width: 1000px;
    margin: auto;
}
 
#main {
    min-height: 100%;
    margin-bottom: -100px;
 
}
 
#all {
    overflow: hidden;
    padding: 0 0 100px;
}
 
#footer {
    height: 100px;
    background: #cfc;
}
 
#left {
    width: 200px;
    float: left;
    background: #fcc;
}
 
#right {
    width: 200px;
    float: right;
    background: #cfc;
}
 
#center {
    margin: 0 200px;
    background: #ccf;
}
HTML5
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

<!doctype html>
<html>
<head>
    <title>3 колонки, Макет, Футер прижат. Простая схема</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <link rel="stylesheet" href="css/common.css" type="text/css">
    <!--[if IE]>
    <link rel="stylesheet" href="css/ie.css" type="text/css">
    <![endif]-->
</head>
<body>
<div id="container">
    <div id="main">
        <div id="all">
            <div id="left">left</div>
            <div id="right">right</div>
            <div id="center">center center center center center center
                center center center center center center center center center
                center center center center center center center center center
                center center center center center center center </div>
        </div>
    </div>
    <div id="footer"></div>
</div>
</body>
</html>
1
26.09.2012, 22:52
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 26.09.2012, 22:52
Помогаю со студенческими работами здесь

min-width и max-width
Вобщем стоит цель сделать так, чтобы шаблон работал на всех мониторах. Идет на самом верху шапка...

Min-width и max-width
Доброго времени суток, форумчане! Разбираюсь с резиновой версткой и придумал себе такое условие: ...

max min width
max-width: 200px; min-width: 100px; Блок принимает наименьшую ширину, а можно ли сделать так, что...

Медиазапросы min-width и min-device-width
Подскажите, почему: @media only screen and (max-width : 1170px), only screen and...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru