Question

我正在使用bootstrap而且我不知道为什么儿童div的高度在大屏幕上较短而在小屏幕上为100％。这是一个在大屏幕上显示的内容. I want that white space at the bottom gone.我尝试将高度设置为100％，但它无法正常工作。这是它在小屏幕上的样子。 You can notice that as the screen get smaller, the button is hiding behind the section below it.

这是html

<div class="project">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" id="project-description">
                <h3>Project</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br> Nulla pretium varius velit, quis bibendum augue pharetra nec. Integer venenatis ipsum ex, quis euismod dui interdum non. Quisque lobortis magna in risus rutrum, vel dictum nulla pulvinar. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pretium varius velit, quis bibendum augue pharetra nec. Integer venenatis ipsum ex, quis euismod dui interdum non. Quisque lobortis magna in risus rutrum, vel dictum nulla pulvinar. <br><br><a href="#" class="btn btn-default">More Info</a></p>
            </div>

            <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" id="project-picture">
            </div>
        </div>
    </div>
</div>

这是css

    .project {
    height: 400px;
}

    .project .container-fluid {
    max-height: 100%;
}

    .project #project-description {
    background-color: #013051;
    max-height: 400px;
    color: #fff;
    font-family: Futura, "Trebuchet MS", Arial, sans-serif;
    font-size: 15px;
}

    .project #project-description h3 {
    margin-top: 60px;
}

    #project-description h3, #project-description p {
    margin-left:40px;
}

    #project-description p {
    border-left: 1px solid #f5f5f5;
    padding-left: 20px;
}

    #project-description p a {
    background-color: #013051;
    border: 1px solid #f5f5f5;
    color: #f5f5f5;
    padding: 10px 30px;
}

    #project-description p a:hover, .contact form button:hover {
    background-color: #f5f5f5;
    color: #000;
}

    .project #project-picture {
    background-image: url(file:///C:/Users/Nelson/Desktop/EsperAfrica/Images/jd-mason-43265.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    height: 400px;
}

感谢您的帮助

Answer 1

据我说，问题是父div有一些填充和边距。这不允许div获得100％的高度。或者可能存在任何与bootst相关的问题

即使高度设置为100％，儿童div的身高也比父母高

1 个答案: