div в div имеет разную высоту, чем родительский. Зачем?

У меня есть div с class=main-content который имеет высоту 100%. Я создал всплывающее окно, которое появляется, когда нажимается ссылка. В идеале эта форма находится в div, который составляет всю страницу. Таким образом, я могу сделать этот div цвет фона серого, поэтому он дает пользователю вид, что он не может щелкнуть вне формы.div в div имеет разную высоту, чем родительский. Зачем?

Однако всплывающее окно имеет разную высоту, чем родительский, даже если я установил высоту, равную 100%. Почему это? Я думал, что высота должна быть в% от содержащего блока. Таким образом, не должна ли она быть такой же высоты, как у родителя?

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

Редактировать: Я должен упомянуть, что я использую SCSS, который позволяет вложенность CSS.

Это показывает, что высота основного контента установлена на уровне 100% и что это действительно полный экран. Main Content

Это показывает, что высота всплывающего окна наложения установлена на 100%, но это не полный экран. Зачем? Overlay modal

Вот мой HTML и CSS мой:

<div class="main-content"> 
    <!--...the page without the modal goes here --> 

    <!--modal starts --> 
    <div id='overlay'> 
     <div id = 'modalpopout'> 

     </div> 
    </div> 
    <!--modal ends--> 
</div>

CSS

.main-content{ 
height:100%; 
padding:50px 0 40px 0; 
} 


#overlay { 
visibility: hidden; 
position: absolute; 
left: 0px; 
top: 0px; 
width:100%; 
height:100%; 
text-align:center; 
z-index: 1000; 
background-color:rgba(105,105,105,0.8); 
#modalpopout { 
    width:500px; 
    margin: 100px auto; 
    background-color: #fff; 
    border:1px solid #000; 
    padding:15px; 
    text-align:center; 

    } 
}

источник

2013-04-14 Terence Chow

Попробуйте добавить position: relative; на номер .main-content.

источник

2013-04-14 02:32:02

TY сэр. Прочитав некоторую документацию, я обнаружил, что это был начальный содержащий блок. Я сделал ошибку, думая, что исходный содержащий блок был родителем. Для тех, кто читает этот ответ, когда у вас есть «позиция: абсолютная», высота относительно ближайшего родителя, положение которого является абсолютным, относительным или фиксированным. Если его нет, это родитель. Вот ссылка с дополнительной информацией и более конкретная: http://www.w3.org/TR/CSS21/visudet.html#containing-block-details –

Точно :) Я просто читал документацию об абсолютном позиционировании http://www.w3.org/TR/CSS21/visuren.html#comp-abspos –

Ваш CSS имеет неверный формат. Переместите #modalpopout CSS за пределами CSS для #overlay.

.main-content{ 
height:100%; 
padding:50px 0 40px 0; 
} 


#overlay { 
visibility: hidden; 
position: absolute; 
left: 0px; 
top: 0px; 
width:100%; 
height:100%; 
text-align:center; 
z-index: 1000; 
background-color:rgba(105,105,105,0.8); 

} 


#modalpopout { 
    width:500px; 
    margin: 100px auto; 
    background-color: #fff; 
    border:1px solid #000; 
    padding:15px; 
    text-align:center; 

    }

Я не могу сказать, если это будет исправить вашу конкретную проблему, но это правильный способ настройки CSS.

источник

2013-04-14 02:19:15 Scott

Извините, что я использую Scss, который позволяет вложить CSS. Перемещение его не имеет никаких эффектов. –

div в div имеет разную высоту, чем родительский. Зачем?

ответ

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