无法滚动网站上的内容

Question

当我的页面加载时，会显示一个 div，询问用户是否 18 岁。

我的问题是，如果屏幕非常小，我不能向下或向上滚动到内容 div，因为只有黑色背景 div 是可滚动的，并且不会滚动我的内容 div。

我认为，固定位置是问题所在，但我希望#auroraOverlayContent div 至少水平居中。这不是问题，它也没有垂直居中。

<div id="auroraOverlay" class="aurora-overlay">
<div class="auroraOverlayContent" id="auroraOverlayContent">
    <div class="auroraTartalom">
        <h3 style="margin-bottom:10px">Elmúltál már 18 éves?</h3>
        <p>A(z) domain.hu webáruház erotikus jellegű tartalmakkal foglalkozik, ezért, kérjük nyilatkozz, hogy elmúltál-e már 18 éves.​</p>
        <button type="button" class="auroraBtn" id="auroraBtnYes">Igen</button>
        <button type="button" class="auroraBtn" id="auroraBtnNo">Nem</button>
    </div>
</div>

#auroraOverlay {
    position: fixed;
    width: 100%;
    height: 100%;
    visibility: visible;
    color: #000;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 1);
    zoom: 1;
    z-index: 998;
    overflow:hidden
}

#auroraOverlayContent {
    position: absolute;
    z-index: 999;
    left: 15%;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 70% !important;
        top:10%;
    text-align: center;
    background: #fff;
    visibility: visible;
    padding:30px

}

.auroraBtn{ background:#ba0944; border:1px solid #ba0944; border-radius:5px; padding:10px 18px; color:#fff; font-weight:bold;}

@media screen and (max-width: 700px) {

    #auroraOverlayContent {
        left: 15%;
        margin-left: auto !important;
        margin-right: auto !important;
        width: 70% !important;
    }

}



    $(document).ready(function()
    {
        $('#auroraOverlay').hide();
        if($.cookie('18old') != 'true')
        {
            $('#auroraOverlay').show();
        }
        $('#auroraBtnYes').click(function(e)
        {
            $.cookie('18old', true, { expires: 1 });
            $('#auroraOverlay').fadeOut('fast');
        });
        $('#auroraBtnNo').click(function(e)
        {
            alert("Sorry, you are young.");
        });
});

Answer 1

你可以用这个方法..

body{
	text-align:center;
}
#auroraOverlayContent{
	display: inline-block;
	margin-top: 10%;
}
p{
	padding-left:10%;
	padding-right:10%;
}

	<div id="auroraOverlay" class="aurora-overlay">
<div class="auroraOverlayContent" id="auroraOverlayContent">
    <div class="auroraTartalom">
        <h3 style="margin-bottom:10px">Elmúltál már 18 éves?</h3>
        <p>A(z) domain.hu webáruház erotikus jellegű tartalmakkal foglalkozik, ezért, kérjük nyilatkozz, hogy elmúltál-e már 18 éves.​</p>
        <button type="button" class="auroraBtn" id="auroraBtnYes">Igen</button>
        <button type="button" class="auroraBtn" id="auroraBtnNo">Nem</button>
    </div>
</div>

Answer 2

试试：

@media screen and (max-width: 700px) {

#auroraOverlay {

    overflow : visible;
}