Как сделать чтобы не появлялись полосы прокрутки на CSS?

Веб-мастеринг

17.04.15

✎

07:59

Есть блок обязательно с полями: padding:20px
Максимальный размер ограничен: max-width:800px;
Блок по центру страницы: body {text-align: center;}
Внутри блока абзац с небольшим текстом: <p>...</p>
Если окно позволяет, блок должен иметь максимальный размер.
При сжатии окна браузера блок сжимается.

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

Как сделать чтобы блок целиком умещался в окне вместе с полями с помощью только CSS, не меняя разметку?

http://pavel.cc/test.html

<style>
div {
    background-color:red;
    display:inline-block;
    max-width:800px;
    height:200px;
    width:100%;
    border: solid;
    padding:20px
    text-align: left;
}
body {text-align: center;}
</style>

<body>
    <div>
        <p>
            ...
        </p>
    </div>
</body>

1 UFO

17.04.15

✎

08:12

Для этого на яве скрипте надо передавать переменные с размерами вместо 800 и 200

2 UFO

17.04.15

✎

08:19

а css-ом отключать скролл он на одном браузере отключает на другом нет

<body scroll="no">

или

body {
overflow-x: hidden;
overflow-y: hidden;
}

3 Супер король

17.04.15

✎

08:29

(1) (2) не подходит по условиям.

4 Asmody

17.04.15

✎

08:50

http://htmlbook.ru/faq/kak-ubrat-polosy-prokrutki

5 Супер король

17.04.15

✎

09:19

(4) не подходит по условиям.

6 Супер король

17.04.15

✎

09:47

7 Супер король

17.04.15

✎

09:59

Очень сложный вопрос, даже я сам не смог пока найти на него ответ.

8 Patriot1C

17.04.15

✎

10:04

Перед тем как убрать полосы прокрутки с веб-страницы, подумайте, действительно ли вам это так необходимо. Отсутствие возможности прокрутки содержимого документа создает трудности посетителям сайта для просмотра информации. Если же существует острая необходимость построения дизайнерских изысков или желание создать своим читателям трудности, то вперед. Но вас предупреждали!
http://htmlbook.ru/faq/kak-ubrat-polosy-prokrutki

9 Супер король

17.04.15

✎

10:15

(8) Почему никто не читает (0)?

Мне не нужно специально убирать полосы прокрутки. Они должны исчезнуть сами.

10 Patriot1C

17.04.15

✎

10:19

(9) Анимацию по исчезновению полос прокрутки еще не предлагали?

11 Супер король

17.04.15

✎

10:20

(10) Нет. Но три раза предложили один и тот же неправильный вариант. Ты был третий.

12 Супер король

17.04.15

✎

11:03

13 klis

17.04.15

✎

11:09

(7) Очень просто вопрос на самом деле. И ответ - никак! CSS задает оформление документа, а не окна браузера. Окном можно управлять через JS.

14 Супер король

17.04.15

✎

11:43

(13) И это не правильный ответ.

15 Serginio1

17.04.15

✎

11:45

(14) Докажи

16 Супер король

17.04.15

✎

11:48

(15) Доказано в ответах: (2) (4) (8) (16)

17 Serginio1

17.04.15

✎

11:56

(16) Так в чем проблема?

18 Dilgorp

17.04.15

✎

12:00

(0)если правильно понял:
<meta name="viewport" content="width=device-width, initial-scale=1.0"> в раздел head
в css :
@media only screen and (max-width:[ширина экрана]px) {"уменьшаешь размер блока и размер шрифта до нужны"} - таким образом описываешь поведение при уменьшении экрана

19 Супер король

17.04.15

✎

12:05

(17) в том что не найден правильный ответ на (0)

20 Serginio1

17.04.15

✎

12:07

(19) Когда ты утверждаешь ответ неверный про решение твоего вопроса без JS, то должен это доказывать. Иначе твой ответ не должен иметь категоричных форм.

21 Супер король

17.04.15

✎

12:08

(20) Хорошо. Доказываю: (16)

22 Serginio1

17.04.15

✎

12:16

(21) Еще раз, тебе человек сказал, что твою проблему нельзя решить без JS. В 16 показано как можно убрать полосы прокрутки, но без условий
Если окно позволяет, блок должен иметь максимальный размер.
При сжатии окна браузера блок сжимается.

23 Супер король

17.04.15

✎

12:20

(22) Человек ошибся. Были ответы доказывающие что без JS можно убрать полосы прокрутки с учетом условий:
Если окно позволяет, блок должен иметь максимальный размер.
При сжатии окна браузера блок сжимается.

24 Супер король

17.04.15

✎

12:35

25 Serginio1

17.04.15

✎

12:37

(23) во всех примерах

Задача

Убрать горизонтальные или вертикальные полосы прокрутки со страницы, не зависимо от объёма страницы.

Решение

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

Способ основан на использовании свойства overflow, которое добавляется к селектору HTML, как показано в примере 1.

Ты лучше на другой форум сходи. Здесь в основном 1С ники.
А нам сообщи о найденном решении

26 Serginio1

17.04.15

✎

12:38

Например http://www.cyberforum.ru/html/

27 klis

17.04.15

✎

12:54

(23) Если блок сжимается под размеры окна, то полосы прокрутки не нужны. Если блок не влазит в окно, то полосы прокрутки обязательны. Как мне кажется, это никак не противоречит с (13). А вот и рыбку съесть, и... не получится. Удачи с поисках решения!))

28 Супер король

17.04.15

✎

13:27

(25) Совершенно другая задача. Было бы так просто, я бы не спрашивал.

29 Супер король

17.04.15

✎

13:29

(27) Нужно только чтобы было: "блок сжимается под размеры окна, то полосы прокрутки не нужны".
В (0) писал об этом.

30 Torquader

17.04.15

✎

13:45

overflow:visible; - блок сжимается, пока его можно сжать.
Ну и размер поставить в процентах, чтобы при сжатии-растяжении выглядело похожим на правду.

31 Супер король

17.04.15

✎

13:49

(30) Чем это отличается от (0) ?

32 Serginio1

17.04.15

✎

13:53

Посмотри http://htmlbook.ru/css/value/media

33 Супер король

17.04.15

✎

13:57

(32) Это не то

34 Serginio1

17.04.15

✎

14:00

Возможно

width (min-width, max-width)

Тип носителя: все кроме speech
Значение: размер

Описывает ширину отображаемой области. Это может быть окно браузера или печатная страница. В примере 9 при уменьшении окна до 600 пикселов и меньше меняется цвет фона веб-страницы.

Пример 9. Использование max-width

HTML5CSS3IECrOpSaFx

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Ширина страницы</title>
  <style>
   body { background: #f0f0f0; }
   @media screen and (max-width: 600px) {
     body { background: #fc0; }
   }
  </style>
</head>
<body>
  <p>Пока магма остается в камере, мусковит сингонально поднимает шток,
  в то время как значения максимумов изменяются в широких пределах. </p>
</body>
</html>

35 Dilgorp

17.04.15

✎

14:01

(33) Почему не то? Решение твоей проблемы обозначенной в (0) находится в (18) никаких полос прокрутки и возможность как угодно подогнать блок, описав его поведение через css

36 Serginio1

17.04.15

✎

14:02

34 что в общем то тебе и советовали в 18

37 Dilgorp

17.04.15

✎

14:05

хороший пример использования @media
http://prowebber.ru/uploads/files/1369508230_block.rar

38 Serginio1

17.04.15