Жидкие фоны в css

У меня есть страница с двумя линиями фона. Одна линия желтая и имеет высоту: 65%, другая линия серая и имеет высоту: 35% И у меня есть абсолютно позиционированный div в центре с фиксированной шириной и высотой. Серые линии находятся прямо под моим div. Проблема в том, что когда я изменяю размер моей страницы или уменьшаю масштаб (для симуляции экрана большого размера) мой div появляется над серым фоном. Если я установил высоту каждой фоновой линии на 50%, все будет хорошо, но мне нужно 65% и 35%. Вот ссылка jsfiddle: http://jsfiddle.net/J2LTR/ Попытайтесь уменьшить масштаб страницы, и черный квадрат пройдет над серым фоном. Любые идеи, как это исправить?Жидкие фоны в css

Вот мой код:

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <style type="text/css"> 
    html, body { 
    padding: 0; 
    margin: 0; 
    height: 100%; 
    min-height: 100% 
} 
    .yellow { 
    width: 100%; 
    height: 65%; 
    background: #e5bd00; 
    background-repeat: repeat; 
    } 
    .gray { 
    width: 100%; 
    height: 35%; 
    background: #d2d2d2; 
    background-repeat: repeat; 
    } 
    .wrap { 
    min-width: 300px; 
    width: 100%; 
    height: 100%; 
    min-height: 600px; 
    margin: 0 auto; 
    position: relative; 
    } 
    .center_box { 
    background: #000; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    margin-top: -120px; 
    margin-left: -200px; 
    width: 400px; 
    height: 235px; 
    } 
    </style> 
</head> 
<body> 
    <div class="wrap"> 
     <div class="yellow"></div> 
     <div class="gray"></div> 
     <div class="center_box">some content</div> 
    </div> 
</body> 
</html>

источник

2014-01-21 YuriyL

ваше значение для верхней и маржи-топ не правильно, потому что она основана на центре и ваш жилец вниз 65%. попробуйте вместо этого:

.center_box { 
    background: #000; 
    position: absolute; 
    top: 65%;/* the tune you need to start with */ 
    left: 50%; 
    margin-top: -235px; 
    margin-left: -200px; 
    width: 400px; 
    height: 235px; 
    }

http://jsfiddle.net/J2LTR/1/

Можно даже использовать линейно-градиент на теле, если вы хотите включить только молодые браузеры: http://codepen.io/anon/pen/EImiz

источник

2014-01-21 16:05:11

Спасибо за ответ. Но мне нужно, чтобы мой серый фон был немного под моим div. И на вашем примере нижняя часть div равна верхней части серого фона. – YuriyL

увеличьте или уменьшите значение margin-top, чтобы настроить его на свои нужды :) -236px даст одну серовую строку из одного пикселя под полем. -237 2px и т. Д. –

Ну, у моего исходного кода есть градиенты :) Это один простой пример. – YuriyL

ответ

Смежные вопросы