Форум XHTML.ru <!-- по-русски -->

Сайты - по стандартам, но не стандартные сайты!


#1 28.01.2013 21:19

NT Man
Новичок
Зарегистрирован: 30.10.2008
Сообщений: 7

Горизонтальное растяжение блока по содержимому

Задача:
1. есть класс CSS скроллер задача которого скролировать все что не уметилось внутри него по x и y.
2. в нем вложен класс декоратор box цель которого задавать фон и отступы
3. в него вложено нечто большое по размерам как по x так и по y
Ожидаем что нечто расширит box до нужных размеров как по x так и по y. Нв деле-же происходит растежение лишь по y, а по x нечто как бы пробивает box и рисуется на фоне скроллера что не есть хорошо.

Как заставить нечто растягивать box по x?

Нужно CSS решение без JS.

Демо пример со скроллером, box и нечто:

Код:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <style>
    html, body {
    display: block;
    position: relative;
    height:100%;
    width:100%;
    
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    }
    .scroller {
    display: block;
    position: relative;
    height:100%;
    width:100%;

    background-color: grey;
    overflow-x: scroll;
    overflow-y: scroll;
    }
    .box {
    display: block;
    position: relative;
    margin: 10px;
    
    background-color: white;
    
    overflow: visible;
    *width:100%;
    }
    .boroda {
    display: block;
    position: relative;
    width:20000px;
    height:20000px;
    }
  </style>
  <body>
    <div class="scroller">
      <div class="box">
        <div class="boroda">11</div>
      </div>
    </div>
  </body>
</html>

Чем больше я пишу на HTML и JavaScript, тем сильнее ненавижу IE!!!

Нет на форуме

 

Board footer

Работает на PunBB
© 2002—2005 Rickard Andersson