Question

我知道有几个这样的问题，但是我找不到答案。

我在HTML页面上使用了相对CSS样式，将元素放置在所需的位置。因此，我在页面底部留有大约500px高的空白空间。我可以将页脚放在底部，但是页脚和正文之间有500px的空白空间。我尝试使用负边距和调整大小，但是没有任何效果。我正在使用块元素div来保存内容，然后在页面上四处移动div。如何摆脱空白？

代码：

<head>
    <title>Ethan's Homepage</title>
    <link rel="icon" type="image/jpg" href="https://previews.123rf.com/images/baser1/baser11403/baser1140300049/26741239-cool-geek-logo-template.jpg" >

    <style type=text/css>
        html{
            height: 2000px;
        }
        body{
            background-color: black;
        }

        #main{
            background-color: gray;
            position:relative;
            bottom: 450px;
            display: block;
            margin-bottom: -125px;
        }

        #menu{
            position: relative;
            bottom: 400px;
            display: inline-block;
        }

        #menu ul{
            list-style-type: none;
            display: inline-block;
        }

        #nselect{
            color: white;
            font-size: 130%;
            border-radius: 5px;
            height: 30px;
            margin: 20px;
            padding: 10px;
        }

        #nselect:hover{
            background-color: rgb(154, 163, 175);
            border-radius: 5px;
            color: black;
        }

        #nselect a{
            text-decoration: none;
        }

        #selected{
            background-color: blue;
            color: yellow;
            font-size: 130%;
            border-radius: 5px;
            height: 30px;
            margin: 20px;
            padding: 10px;
        }

        #headerimg{
            height: 300px;
            width: 100%;
        }

        footer img{
            width: 100%;
            margin-bottom: -250px;
        }

        #search{
        text-align: right;
        position: relative;
        bottom: 30px;
        margin: 30px;
        }

        #videos{
            margin: 30px;
            position: relative;
            left: 30px;
            display: block;
        }

        .row {
          display: flex;
          flex-wrap: wrap;
          padding: 0 4px;
        }

        /* Create three equal columns that sits next to each other */
        .column {
          flex: 33.3%;
          padding: 0 4px;
        }

        .column img {
          margin-top: 8px;
          vertical-align: middle;
        }

        #sicons{
            position: relative;
            left: 700px;
            bottom:  310px;
            display: block;
        }




    </style>
</head>

<header>
    <img id="headerimg" src="http://www.spulsa.info/wp-content/uploads/cool-twitter-banners-70-cool-twitter-headers-random-styles-from-nature-to-business.jpg">
    <h1 style="position: relative; left: 700px; bottom: 200px; color: white">Home</h1>
    <div id="menu">
        <ul>
            <li><div id="selected">Home</div></li>
            <li><a href="file:///C:/Users/Ethan/Documents/work.html"><div id="nselect">Work</div></a></li>
            <li><div id="nselect">Fun</div></li>
            <li><div id="nselect">News</div></li>
        </ul>
    </div>

</header>

<body>
    <div id="main">
        <form id="search" method="get" action="http://www.google.com/search" target="_blank"> <input type="text" name="q" size="31" maxlength="255" value="" /> <input type="submit" value="Google Search" /></form>
        <div id="videos"><iframe width="560" height="315" src="https://www.youtube.com/embed/UOUBW8bkjQ4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe></div>

        <div id="sicons">
            <div class="row"> 
              <div class="column">
                <a href="https://www.facebook.com/"><img src="https://i2.wp.com/www.vectorico.com/wp-content/uploads/2018/02/Facebook-Icon-Dark.png?resize=300%2C300" height="50px" width="50px"></a>
                <a href="https://twitter.com/"><img src="https://womenin.digital/wp-content/uploads/2017/03/twitter.png" height="60px" width="60px"></a>
                <a href="https://ca.linkedin.com/"><img src="https://i1.wp.com/www.vectorico.com/wp-content/uploads/2018/02/LinkedIn-Icon-Dark.png?resize=300%2C300" height="50px" width="50px"></a>
              </div>
              <div class="column">
              </div> 
              <div class="column">
                <a href="https://www.instagram.com/"><img src="https://abbyjreed.com/wp-content/uploads/2014/03/galaxy_instagram_social_icon_50x50.png" style="border-radius: 25px; padding: 2px;"></a>
                <a href="https://www.tumblr.com/"><img src="https://abbyjreed.com/wp-content/uploads/2014/03/galaxy_tumbler_social_icon_50x50.png" style="border-radius: 25px; padding:2px;"></a>
                <a href="https://www.youtube.com/"><img src="https://abbyjreed.com/wp-content/uploads/2014/03/galaxy_you_tube_social_icon_50x50.png" style="border-radius: 25px; padding:2px;"></a>
              </div>
              <div class="column">
              </div>
              <div class="column">
                <a href="https://www.pinterest.ca/"><img src="https://image.flaticon.com/icons/svg/23/23775.svg" height="50px" width="50px" style="border-radius: 25px"></a>
                <a  href="https://wordpress.com/"><img src="https://foomandoonian.files.wordpress.com/2011/11/splatter-grunge-wordpress-logo.png" height="60px" width="60px"></a>
                <a href="https://mail.google.com/mail/u/0/"><img src="https://cdn1.iconfinder.com/data/icons/picons-social/57/61-google-inbox-512.png" height="60px" width="60px"></a>
              </div>
            </div>
        </div>
        </br></br></br>
    </div>
</body>

<footer>
    <img src="https://coverfiles.alphacoders.com/498/49814.jpg">
</footer>

Answer 1

我相信我为您解决了这个问题。我从html标记中删除了height: 2000px;，因为在此处设置它不是一个好习惯。我还从页脚中删除了margin-bottom: -250px;。

这里是Codepen与我的解决方案：

https://codepen.io/anon/pen/zLrpxw

告诉我，如果这是您要寻找的:) 我强烈建议您学习一些有关引导的知识。它很容易让您完全控制页面布局，包括页眉，页脚和正文网格。

Answer 2

我错过了标题和正文之间的空间。

这现在应该可以工作：

https://codepen.io/anon/pen/zLrpxw?editors=1100

我修改了菜单：

#menu{
        position: absolute;
        top : 0;
        display: inline-block;
     }

HTML相对样式在页面底部留有400px的空白

2 个答案: