Question

I'm using Bootstrap 4 with a custom CSS stylesheet and the structure of my page is as follows:

<header>
    <!-- header content (fixed) -->
</header>

<main role="main" class="container-fluid">
    <!-- main content -->
</main>

<div id="contact-information">
    <!-- contact information (absolute) -->
</div>

<footer class="footer">
    <!-- footer content (absolute) -->
</footer>

Now, the issue I am facing is the following, I want <main> to take up all the gap between <header> and <div id="contact-information"> but the actual output is something like this:

<header>
    <!-- header content -->
</header>

<main role="main" class="container-fluid">
    <!-- main content -->
</main>

<!-- WHITE GAP -->

<div id="contact-information">
    <!-- contact information (absolute) -->
</div>

<footer class="footer">
    <!-- footer content -->
</footer>

I have looked at similar questions but to no avail, the white gap still remains. I have the feeling it is something to do with my custom CSS. My actual code is (HTML and CSS of each section will follow respectively):

<main> HTML & CSS

<main role="main" class="container-fluid" style="border: 2px solid red;">
    <div id="content-container">
        <div id="content-container-content">
            <h2 class="text-uppercase">About Us</h2>

            <hr>

            <p id="content-container-sub-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
                dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
                ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
                eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
                deserunt mollit anim id est laborum.
            </p>
        </div>
    </div>
</main>

main {
    margin-top: 150px;
    padding: 0 !important;
}

#content-container {
    position: relative;
    height: 432px;
    background-color: white;
}

#content-container hr {
    visibility: hidden;
}

#content-container-content {
    position: absolute;
    text-align: center;
    width: 90%;
    color: #83323e;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#content-container-sub-content {
    font-size: 24px;
    width: 100%;
    color: #a63f4f;
    line-height: 40px;
}

<div id="contact-information"> HTML & CSS

<div id="contact-information">
    <h3>Company Name</h3>
    <p>12 Street, Area, City AB1 2CD, UK</p>
    <p>Tel: (01234) 123-456 | Mobile: 01234567891</p>
    <p>
        <a href="#" class="text-white" target="_blank">View in Map</a>
    </p>
    <div>
        <span style="cursor: pointer;">
            <i class="fa fa-twitter fa-2x" aria-hidden="true" style="color: #00aced;"></i>
        </span>
        &nbsp; &nbsp;
        <span style="cursor: pointer;">
            <i class="fa fa-youtube-play fa-2x" aria-hidden="true" style="color: white;"></i>
        </span>
    </div>
</div>

#contact-information {
    position: absolute;
    height: 283px;
    width: 100%;
    text-align: center;
    color: white;
    background-color: #a63f4f;
    bottom: 60px;
    padding: 50px;
}

Visual

Notice the bordered red box doesn't take up all the space responsively.

Live Example

Please click here to view it live.

So, my question is, how do I remove said white gap?

Answer 1

这是你应该做的，以便在任何设备上消除这种差距：

将#contact-information置于<header>，<footer>或<main>内，具体取决于您是否希望在每个页面上<header> - 页面内容，{ {1}} - 页面内容以下）或仅在当前页面<footer>
停止使用<main>进行样式设置。它是任何页面内容的容器，因此您添加到其中的任何样式都将应用于您网站的所有页面。最好将其视为一个功能性容器，并根据您网站的特定需求设置其子项的样式
如果您希望<main>的{{1}}填满整个页面（允许全屏背景，能够将内容放在屏幕中间等等），请给它<main> min-height，min-height，100vh等于margin的实际身高，padding-top等于<header>实际高度。
由于padding-bottom和<footer>基于设备的高度不同，因此应使用JavaScript在<header>和<footer>对象的load事件上动态完成此操作。

松散地翻译成代码（我必须做出一些假设），上面的内容将是：

resize

Window

function setMinHeight() {
  $('main').css({
    paddingTop: $('header nav').eq(0)[0].clientHeight + 'px',
    paddingBottom: $('footer').height() + 'px',
  })
}
$(window).on('load resize', setMinHeight);

我可能错了，但是从我在你的例子中发现的情况来看，你的团队似乎缺少一个CSS人，你认为Bootstrap v4将帮助你填补空白。有可能它不会。如果出现以下情况，Bootstrap坚如磐石：

你不会偏离给定的例子（不需要自定义布局）或......
你了解它背后的CSS，它的逻辑以及如何修改它，这样你就不会在各种设备上破坏任何东西。

此外，v4现在很脆弱。有一些不确定的问题，它还没有跨浏览器/跨设备。如果你真的买不起CSS家伙，你最好使用最新的#contact-information { text-align: center; color: white; background-color: #a63f4f; bottom: 60px; padding: 50px; } #content-container { background-color: white; display: flex; align-items: center; justify-content: center; padding: 50px; color: #83323e; border: 2px solid red; } #content-container hr { visibility: hidden; } #content-container-sub-content { font-size: 24px; color: #a63f4f; line-height: 40px; } main:not(#_) { min-height: 100vh; display: flex; flex-direction: column; } main #content-container { flex-grow: 1; } main #contact-information { flex: 0 0 auto; } .footer { position: fixed; bottom: 0; width: 100%; height: 60px; line-height: 60px; background-color: #83323e; } .bg-dark:not(#_) { background-color: #83323e!important; }，这是非常可靠的，超乎想象的测试。你不太可能需要v3尚未完成的东西（<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <header>  <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#">Fixed navbar</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> <form class="form-inline mt-2 mt-md-0"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <button class="btn btn-outline-default my-2 my-sm-0" type="submit">Search</button> </form> </div> </nav> </header> <main role="main" class="container-fluid"> <div id="content-container" class="row"> <div class="col-12"> <h2 class="text-uppercase">About Us</h2> <hr> <p id="content-container-sub-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </div> <div id="contact-information" class="row"> <div class="col-12"> <h3>Company Name</h3> <p>12 Street, Area, City AB1 2CD, UK</p> <p>Tel: (01234) 123-456 | Mobile: 01234567891</p> <p> <a href="#" class="text-white" target="_blank">View in Map</a> </p> <div> <span style="cursor: pointer;"> <i class="fa fa-twitter fa-2x" aria-hidden="true" style="color: #00aced;"></i> </span>     <span style="cursor: pointer;"> <i class="fa fa-youtube-play fa-2x" aria-hidden="true" style="color: white;"></i> </span> </div> </div> </div> </main> <footer class="footer"> <div class="container"> <span class="text-muted">Place sticky footer content here.</span> </div> </footer>不是这种情况）。
有关v3 vs v4以及从一个升级到另一个的更多详细信息，我最近回答了this question，答案就是答案。对于生产环境，v4还没有机会对抗v3，恕我直言。

How to remove white gap between two divisions?

1 个答案: