Как мне заставить div с жидким расположением прекратить движение в определенной точке?

#css

Вопрос:

Я работаю над прототипом веб-сайта здесь:

http://www.paulgrantdesign.com/valcomp/index.php

У меня есть div в середине, который настроен на удержание в середине. У него заданная высота, поэтому в css я сделал

 #middle {
height: 225px;
width: 100%;
background-color: #56a6c4;
position: absolute;
top: 50%;
margin-top: -112px;
z-index: 100;
}

Он находится посередине, как и требуется. Но когда окно становится слишком маленьким, я не хочу, чтобы оно закрывало то, что над ним. Могу ли я настроить его так, чтобы всегда было минимальное расстояние между верхней частью окна и верхней частью этого div?

1. это делают проценты. Вы хотели центрировать их по вертикали, но теперь вы застряли.

2. Я думаю, мне просто нужно сделать #top и # middle div статической высотой. Я думаю, это проще всего. Не идеально, но лучше, чем пытаться разобраться с этим беспорядком 🙂 Спасибо за ответы.

3. что, если вы объедините это с медиа-запросами, поскольку я предполагаю, что именно поэтому вам нужны жидкие высоты.

Ответ №1:

Возможно, вы можете использовать media query для этого следующим образом:

 @media only screen
and (min-width : 1000px) {
  #middle {
   color:red;
}
}

Вы можете прочитать эти статьи

http://css-tricks.com/6731-css-media-queries / ,

http://css-tricks.com/6206-resolution-specific-stylesheets/

Ответ №2:

поместите position: relative в тело.это первый шаг. Я пытаюсь .. удерживать .. и внизу-позиция: абсолютная. Это работает! да!

Ответ №3:

Я исправил вашу проблему, изменив ваш html следующим образом:

 <div id="container">
    <div id="top">
        <div id="topcontent">
            <p id="mobile">Mobile data collection</p>
            <p id="slogan">Collect. Send. That's it.</p>
        </div>
    </div>
    <div id="middle"></div>
</div>

Затем измените свой css следующим образом:

 #container{
    width: 100%;
    position: absolute;
    min-height: 350px;
    bottom: 20%;
    top: 0;
}

#top {
    width: 825px;
    min-height: 250px;
    display: block;
    position: absolute;
    left: 50%;
    height: 50%;
    margin-left: -412px;
    overflow: auto;
    bottom: 250px;
}

#topcontent {
    width: 100%;
    position: absolute;
    bottom: 0;
}

...

#middle {
    height: 225px;
    width: 100%;
    background-color: #56a6c4;
    position: absolute;
    bottom: 0;
    margin-top: -112px;
    z-index: 100;
}

Возможно, потребуется некоторая настройка, чтобы сделать его именно таким, как вы хотите; особенно с #bottom div

1. Да, это делает то, что я хочу, с точки зрения того, что #top div остается видимым, но это действительно портит #bottom div. Не уверен, что найти решение таким образом проще, чем моим способом.

Ответ №4:

Вам нужно добавить атрибут z-index к элементам #top и #bottom , и пусть они меньше, чем z-index of #middle .

1. К сожалению, это не сработает, потому что для того, чтобы убедиться, что у #top div нет видимого дна или видимой вершины у #bottom div, они встречаются посередине, и #middle div закрывает шов. Если я изменю z-index, я полностью потеряю div #middle.