个人中心
gpt4 book ai didi

html - 我的页脚下方有很多未使用的空间 "div"

转载 作者：可可西里 更新时间：2023-11-01 12:50:22 28 4
gpt4 key购买 nike

我正在尝试在我的母版页上创建一个页脚 div。它有点管用，但是当我运行我的网站时，页脚下方有很多未使用的空间。我怎样才能删除它？我正在使用 vs2012。出于某种原因，我不能在工作中使用 jsfiddle。抱歉发了这么长的帖子。

enter image description here

我的 html:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Território Levita - Portal</title>
    <script src="../js/jquery-1.9.1.js"></script>
    <script src="../js/jquery.maskedinput.js"></script>
    <link href="../css/StyleMaster.css" rel="stylesheet" />
    <asp:ContentPlaceHolder ID="head" runat="server">

    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div id="header">
            <h1><a href="#">Território Levita - Portal</a></h1>
        </div>

        <div id="menuNav">
            <ul>
                <li class="ativo"><a href="#">Principal</a></li>
                <li class="temsub"><a href="#">Eventos</a>
                    <ul>
                        <li><a href="#">´~~´ç55,,.\\Visualizar Eventos</a></li>
                        <li><a href="#">Manter Eventos</a></li>
                    </ul>
                </li>
                <li class="temsub"><a href="#">Dados Pessoais</a>
                    <ul>
                        <li><a href="#">Visualizar dados Pessoais</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="conteudo">
            <asp:ContentPlaceHolder ID="content" runat="server">
            </asp:ContentPlaceHolder>
        </div>
        <div id="footer">
            <h3>"Mas, no tocante às cidades, às casas das cidades da sua possessão, direito perpétuo de resgate terão os levitas." Levítico 25:32 </h3>
        </div>
    </form>
</body>
</html>

我的CSS:

body {
    min-width: 1024px;
    min-height: 768px;
}



#header { /*Estilo do cabeçalho*/
    background-color: #67BCDB; /*Cor de fundo*/
    width: 95%; /*Comprimento - 95% da tela*/
    margin: 0 auto; /*Margin: espaçamento entre o elemento e outro - tá 0 para top e bottom, e auto para left e right (alinha no centro)*/
    height: 80px; /*Altura do header*/
    line-height: 80px; /*Tamanho da linha. Como tá igual à altura, o texto fica no meio.*/
    padding-left: 20px; /*Espaço entre a borda do header e o conteúdo - o elemento A*/
}

    #header a { /*Estilo do texto do cabeçalho*/
        text-decoration: none; /*Sem decoração no texto*/
        color: #fff; /*Cor branca*/
    }


#menuNav {
    margin-left: 23px;
}
/*Menu*/
#menuNav > ul {
    list-style: none; /*Tirando o estilo da lista de dentro da div*/
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    line-height: 1;
}

#menuNav > ul { /*Container*/
    display: block;
    width: 20%;
    float: left;
    margin-top: 25px;
    position: relative;
}

    #menuNav > ul li { /*Contem links*/
        display: block;
        position: relative;
        margin: 0;
        padding: 0;
        width: 150px;
    }

    #menuNav > ul  li  a { /*Estilo dos botões "pais"*/
        display: block;
        position: relative;
        margin: 0;
        border-top: 1px dotted #fff;
        border-bottom: 1px dotted #d9d9d9;
        padding: 11px 20px;
        width: 100px;
        /*Tipografia*/
        font-family: Helvetica, Arial, sans-serif;
        color: #3dafea;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 13px;
        font-weight: 300;
        background: #eaeaea;
    }

        #menuNav > ul > li > a:hover, #menuNav > ul > li:hover > a { /*Quando o mouse estiver por cima*/
            color: #fff; /*Cor de texto branca*/
            background: #54cdf1; /*Muda a cor de fundo para um azul*/
            background: -webkit-linear-gradient(bottom, #54cdf1, #74d7f3); /*Gradientes para cor de fundo.*/
            background: -ms-linear-gradient(bottom, #54cdf1, #74d7f3);
            background: -moz-linear-gradient(bottom, #54cdf1, #74d7f3);
            background: -o-linear-gradient(bottom, #54cdf1, #74d7f3);
            border-color: transparent; /*Tira as bordas*/
        }

    /*A seta do submenu*/
    #menuNav > ul .temsub > a::after {
        content: '';
        position: absolute;
        top: 16px;
        right: 10px;
        width: 0px;
        height: 0px;
        border: 4px solid transparent;
        border-left: 4px solid #3dafea;
    }

    #menuNav > ul .temsub > a::before {
        content: '';
        position: absolute;
        top: 17px;
        right: 10px;
        width: 0px;
        height: 0px;
        /* Creating the arrow using borders */
        border: 4px solid transparent;
        border-left: 4px solid #fff;
    }

    /* Changing the color of the arrow on hover */
    #menuNav > ul li > a:hover::after, #menuNav > ul li:hover > a::after {
        border-left: 4px solid #fff;
    }

    #menuNav > ul li > a:hover::before, #menuNav > ul li:hover > a::before {
        border-left: 4px solid rgba(0, 0, 0, .25);
    }

    /*submenus*/
    #menuNav > ul ul {
        position: absolute;
        left: 150px;
        top: -9999px;
        padding-left: 5px;
        -webkit-transition: opacity .3s ease-in;
        -moz-transition: opacity .3s ease-in;
        -o-transition: opacity .3s ease-in;
        -ms-transition: opacity .3s ease-in;
    }

    /* Showing the submenu when the user is hovering the parent link */
        #menuNav > ul li:hover>ul {
            top: 0px;
            opacity: 1;
        }

#conteudo {
    margin: 25px 50px 0 50px;
    float: right;
    width: 70%;
}

/*Rodapé*/
#footer {
    clear:both;
    width: 95%;
    height: 80px; /*Altura do header*/
    line-height: 80px;
    background-color: #67BCDB;
    margin: 10px auto 0 auto;
    text-align: center;    
}

    #footer h3 {
        color: #FFF;
    }

最佳答案

从body中删除以下规则:

min-height: 768px;

您的页脚也有line-height。删除它以完全删除页脚后的空格 ( FIDDLE DEMO )。您可以添加 padding-top: 10px; 以根据需要设置页脚样式。

关于html - 我的页脚下方有很多未使用的空间 "div"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16566029/

28 4 0
文章推荐： php - 像 base36 一样编码，包括大写
文章推荐： php - 网站的解释语言与编译语言(PHP、ASP、Perl、Python 等)
文章推荐： PHP运行时类修改
文章推荐： windows - UAC 和提升提示模式
可可西里
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com