Question

我有一个小问题，

我希望我的HTML代码高度为100％，但我无法让它工作。

这是我的屏幕图片

我的HTML代码：

    <!DOCTYPE html>
<html lang="fr" ng-app="zozoApp">
<head>
    <base href="/">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>zozo</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel='stylesheet AdministrationUtilisateur' href='dev/vitrine/CSS/CerpStyle.css'>
     <style>


    html {
        height: 100%;
    }
    body {
        min-height: 100%;
    }


    /*footer*/
    .lienfooter{
        color: #91003e;
        text-decoration-line: underline;

    }
    .Gazano{
        color: #ffffff;
        text-decoration-line: none;

    }

    .lienfooter:hover{
        color: white;
        text-decoration-line: none;
    }

    .footer{
        height: 75px;
        background-color: #080808;
        padding-top: 2%;

    }

    /*End footer*/


    /*NavBar*/

    .navbar-default .navbar-nav > li > a {
        /*color: #8ABD24;*/
        font-family: sans-serif;
        font-size: 16px;
        color: black
    }
    .navbar-default{
        background-color: rgba(255,255,255,0.9) !important;
        background-image: none;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 2px rgba(0,0,0,.075);
    }

    .navbar{
        min-height: 91px;
    }

    .navbar-right {
        float: right !important;
        margin-right: -15px;
        margin-top: 20px;
    }

    .navbar-default .navbar-nav > li > a span.line {
        background: linear-gradient(to bottom,rgba(183,183,183,0) 13%,rgba(183,183,183,0.6) 50%,rgba(183,183,183,0) 87%);
        content: "";
        display: block;
        position: absolute;
        width: 1px;
        height: 40%;
        top: 30%;
        right: 0;
    }

    /*end navbar*/


</style>
</head>
<body>


<div id="NavbarT" class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" rel="home" href="#" title="">
                <img id="logo" style="max-width:171px; margin-top: -10px;margin-left:70px;" src="dev/vitrine/dd/Cerp_astera_couleur.png">
            </a>
        </div>

        <div id="navbar" class="collapse navbar-collapse navbar-responsive-collapse">
            <div class="navbar-form navbar-right" ng-if="userCerp" >
                <ul class="nav navbar-nav">
                    <li class="d"><a href="#" id="Utilisateur" ui-sref="produit" data-dir="">Accueil<span class="line"></span></a></li>

                    <li class="nav-item dropdown">
                        <a href="#" id="Utilisateur" ui-sref="panier" data-dir=""><span class="glyphicon glyphicon-shopping-cart"><lavel id="cart-badge" class="badge badge-warning"></lavel></span></a><span class="line"></span>
                        <div id="PopupPanier" class="dropdown-menue" aria-labelledby="navbarDropdownMenuLink" style="text-align: center">
                            <span id="textPopupPanier"   data-dir=""></span>
                        </div>
                    </li>

                    <li class="nav-item dropdown">
                        <a data-toggle="dropdown" class="dropdown-toggle" href="#" id="NomClientNav">nom utilisateur</a>
                        <div class="dropdown-menu colordropdown" aria-labelledby="navbarDropdownMenuLink">
                            <a class="textdeco" ng-click="Logoff()" style="cursor: pointer" id="logoff" data-dir="">deconnection</a>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</div>


<div ui-view></div>

    <div id="footer" class="footer">
        <table width="100%" style="font-size: 12px;">
            <tr>
                <td width="33%" style="text-align: left; padding-left: 15px;"><a class="lienfooter" href="http://www.cerp.be/PUB/CRP990.aspx#CGU">Mentions légales</a></td>
                <td width="33%"  style="text-align: center"><p class="Gazano"> © <?php echo Date('Y'); ?> by zozo</p></td>
                <td width="33%"  style="text-align: right; padding-right: 15px;" ><a class="lienfooter" href="http://www.cerp.be/PUB/CRP990.aspx#CGV">Conditions générales</a></td>
            </tr>
        </table>
    </div>

</body>
</html>

我只想填写空格并将页脚放在每个屏幕的底部

我已经测试了HTML和身高100％，但没有任何效果

Answer 1

您可以制作页脚position:absolute并将position:relative添加到正文中。它还有助于将padding-bottom添加到主体以获得页脚的高度。

body{
    position: relative;
    /* padding-bottom: the height of the footer */
}
.footer{
    height: 75px;
    background-color: #080808;
    padding-top: 2%;
    position: absolute;
    bottom: 0;
}

Answer 2

尝试：

.footer{
      height: 75px;
      background-color: #080808;
      padding-top: 2%;
      position:relative;
      bottom:0px;
}

Answer 3

我发现这个CodePen，如果你想在页面底部粘贴页脚，它会很有用：

.footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

https://codepen.io/cbracco/pen/zekgx

Answer 4

代码强制页脚到页面底部。也可以使用@media

执行此操作

html {
  height: 100%;
  box-sizing: border-box
  /*Required to be in html*/
}

*{
  box-sizing: inherit;
}

body {
  position: relative;
  margin: 0;
  padding-bottom: 6rem;
  min-height: 100%
}

.demo h1 {
  margin-top: 0;
}

/**
 * Footer Styles
 */

footer {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef/*Optional*/
}

<div class="demo">
  <h1>CSS “Always on the bottom” Footer</h1>

  <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p>
  <p>However, if the content is taller than the user’s viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p>

  <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer’s parent element to be the same value (or larger if you want some spacing).</p>

  <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p>
</div>

<footer>This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</footer>

Answer 5

您可以做的是将display flex属性用于容器。

然后，将flex：1设置为主要内容部分，以便占用最大空间你的页脚每次都会在底部。

工作小提琴：

＆＃13;

public void loadData()
    {
        try(BufferedReader br=new BufferedReader(new FileReader(super.fileName))){
            String line;
            while((line=br.readLine())!=null){
                String[] atributes=line.split(";");
                if(atributes.length!=4)
                    throw new Exception("Linia nu este valida!");
                Student t=new Student(atributes[0],atributes[1],atributes[2],atributes[3]);
                super.save(t);

            }
            Thread.sleep(5000);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    public synchronized void writeToFile() {
        try (BufferedWriter br = new BufferedWriter(new FileWriter(super.fileName))){
            super.entities.forEach(x -> {
                try {
                    br.write(x.studentFileLine());
                } catch (IOException e) {
                    e.printStackTrace();
                }
            });
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

＆＃13;

html {
  min-height: 100vh;
}

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  display: flex;
  flex-flow: column nowrap;
}

.one {
  background-color: springgreen;
}

.two {
  flex: 1;
  background-color: antiquewhite;
}

.three {
  background-color: grey;
}

＆＃13;

无法使屏幕适应100％的高度

5 个答案: