Вроде простая вещь, но

VRus · September 19, 2012

не делается как я хочу. Нужно чтобы блок фиксированной ширины располагался по центру и занимал всю высоту окна браузера. А внутри блока четыре квадрата, содержащие контент. Причем чтобы вертикальные размеры этих внутренних квадратов не зависели от контента. Глянул форум и допилил один случай, почти то что надо, только почему-то не выравнивается по центру: http://jsfiddle.net/VRus/LZdgF/

Great Rash · September 19, 2012

Потому что position: absolute; бесполезно выравнивать при помощи margin. Юзайте left, right, top, bottom.

VRus · September 19, 2012

О, спасиб. Сделал width 50% left 25%. А это самый изящный способ, или есть что поумнее?

В смысле в целом по реализации.

Edited September 19, 2012 by VRus

VRus · September 19, 2012

Сам теперь вижу что че то не то. Внутренние квадраты тогда тоже надо в процентах выражать. Но при этом они перестают быть квадратами.

Edited September 19, 2012 by VRus

rus · September 20, 2012


<html>
<head>
<style>
   .wrapper {
   position: relative; /* что бы абсолютное позиционирование отсчитывалось от этого блока, а не от body */
    background: white; /* Цвет фона */
    width: 400px;
    height: 100%; /* Высота блока */
    margin: 0 auto;
    border: 1px solid black;
   }
   .box1 {
    position: absolute; /* Абсолютное позиционирование */
	overflow: hidden; /* что бы контент не растягивал высоту блока, можно и scroll и auto поставить вместо hidden */
    width: 150px;
    height: 150px;
    top: 30px;
    left: 30px;
    border: 1px solid black;
   }
      .box2 {
    position: absolute; /* Абсолютное позиционирование */
	overflow: hidden; /* что бы контент не растягивал высоту блока, можно и scroll и auto поставить вместо hidden */
    width: 150px;
    height: 150px;
    top: 30px;
    right: 30px;
    border: 1px solid black;
   }
      .box3 {
    position: absolute; /* Абсолютное позиционирование */
	overflow: hidden; /* что бы контент не растягивал высоту блока, можно и scroll и auto поставить вместо hidden */
    width: 150px;
    height: 150px;
    bottom: 30px;
    left: 30px;
    border: 1px solid black;
   }
      .box4 {
    position: absolute; /* Абсолютное позиционирование */
	overflow: hidden; /* что бы контент не растягивал высоту блока, можно и scroll и auto поставить вместо hidden */
    width: 150px;
    height: 150px;
    bottom: 30px;
    right: 30px;
    border: 1px solid black;
   }  
  </style>
</head>
 <body>
  <div class="wrapper">
   <div class="box1"></div>
   <div class="box2"></div>   
   <div class="box3"></div>
   <div class="box4"></div>
  </div>
 </body>
</html>

VRus · September 20, 2012

Дык результат не тот. Внешний прямоугольник виден как линия вверху экрана.

rus · September 20, 2012

я вроде сделал все то же самое что и у вас по ссылке, только лишь мелкие недочеты поправил что б корректнее отображалось.

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

headstik · September 20, 2012

Оно? http://jsfiddle.net/9cKWc/

VRus · September 20, 2012

headstik, оно ) Пойду изучать. Только еще нужно, чтобы прокрутка не появлялась.

VRus · September 20, 2012

rus, кажется вы absolute на relative поменяли во внешнем блоке. Я тут в материалах сайта читал, что так обычно и делается при позиционировании блоков, только в данном случае результат сильно меняется. Кстати тоже вроде попадалось, что если для внешнего блока указывается absolute, и внутренние absolute, то внутренние всё-равно отсчитывают расстояния от родителя. Если я правильно запомнил, конеш.

headstik · September 21, 2012

Только еще нужно, чтобы прокрутка не появлялась.

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

Как нарисовать границу без прокрутки?

rus · September 21, 2012

rus, кажется вы absolute на relative поменяли во внешнем блоке. Я тут в материалах сайта читал, что так обычно и делается при позиционировании блоков, только в данном случае результат сильно меняется. Кстати тоже вроде попадалось, что если для внешнего блока указывается absolute, и внутренние absolute, то внутренние всё-равно отсчитывают расстояния от родителя. Если я правильно запомнил, конеш.

в коде в самом верху оставил комментарий, читай

Только еще нужно, чтобы прокрутка не появлялась.
Поломал голову, но решения не нашел. Было бы интересно, что скажут по этому поводу знатоки )
Как нарисовать границу без прокрутки?

min-height(который вроде бы не все браузеры понимают):размер;

height:размер;

overflow:hidden;

hedgehog · September 21, 2012

Поломал голову, но решения не нашел. Было бы интересно, что скажут по этому поводу знатоки )
Как нарисовать границу без прокрутки?

Можно подложить костыль в предыдущие примеры из этой темы:

http://jsfiddle.net/9cKWc/2/

headstik · September 21, 2012

Можно подложить костыль в предыдущие примеры из этой темы:

http://jsfiddle.net/9cKWc/2/

+1

VRus · September 21, 2012

hedgehog, спасиб ) Только для браузеров добавил margin: 0 сюда: html, body { height: 100%; margin: 0; } Пойду изучать.

rus, счас попробую.

VRus · September 21, 2012

min-height(который вроде бы не все браузеры понимают):размер;
height:размер;
overflow:hidden;

rus, размер в смысле 100% в обоих случаях? Че то не получается, т.е. непонятно в какой код эти значения вставлять.

По правде я как новичок думал, что это стандартная распространенная задача - создать поле фиксированной ширины без прокрутки, которое по высоте совпадает с окном браузера. Даже безотносительно что внутри этого поля.

А еще любопытно, можно ли сделать чтобы упомянутое поле было не фиксированной ширины, а всегда совпадало с высотой окна браузера. Т.е. чтобы пользователь всегда видел квадрат.

Sign In

Вроде простая вещь, но

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information