html - 页眉和页脚行根据内容调整大小

标签 html css angular-material

在这个小例子中，我有两个栏(标题/底部)，其特定高度应为 175 px。我想要在他们之间放一些卡片。很好，它适用于几张卡。但是，随着我添加更多卡片，条形会缩小到更小的尺寸。 

[http://codepen.io/n00n/pen/bBZKwb][1]

如何防止这种行为？

最佳答案

使用min-height，它会保留你的高度

在此代码中，将 min-height:175px; 添加到您的 #PageHeader, #PageBottom 中，它将正常工作。,,我添加了下面的代码片段。

*{
    margin: 0px;
    padding: 0px;
}

html, body {
    height: 100%;
    width: 100%;
}

body{
    display: table;
    overflow: hidden;
}

body#index{
    background-image: url("../assets/start-page.jpg");
    background-position: center center;
    background-size: cover;
}

.body-row{
    display: table-row;
}

.body-cell{
    display: table-cell;
}

#TopLogo, #TopNavigation, #BottomInformation, #BottomNavigation{
    color: #F1BF00;
}

#TopLogo{
    position: absolute;
    right: 5px;
    top: 5px;
}

#TopNavigation{
    position: absolute;
    bottom: 5px;
    left: 5px;
}

#PageHeader, #PageBottom{
    position: relative;
    background: #AA151B;
    height: 175px;
  min-height:175px;
}


#PageBottom{
    position: relative;
}

#BottomInformation{
    position: absolute;
    left: 5px;
    height: 175px;
    line-height: 175px;
}

#BottomNavigation{
    position: absolute;
    top: 5px;
    right: 10px;
}

#PageContent {
    background: #F1BF00;
}

#CardColumn{
    overflow-y: scroll;
}

#PageContent .body-cell{
    padding: 10px;
}

.rightAlign{
    text-align: right;
}

a{
    color: #FFFF00;
    margin: 5px;
}

#contentframe{

}

/* Portrait */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: portrait) {
    body#index{
        background-image: url("../assets/start-page-smart.jpg");
        background-position: center center;
        background-size: cover;
    }
}

#wrapper {
    width: 90%;
    max-width: 1100px;
    min-width: 800px;
    margin: 50px auto;
}

#columns {
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    -webkit-column-fill: auto;
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -moz-column-fill: auto;
    column-count: 3;
    column-gap: 15px;
    column-fill: auto;
}

.pin {
    display: inline-block;
    background: #FEFEFE;
    border: 2px solid #FAFAFA;
    box-shadow: 0 1px 2px rgba(34, 25, 25, 0.4);
    margin: 0 2px 15px;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
    column-break-inside: avoid;
    padding: 15px;
    padding-bottom: 5px;
    background: -webkit-linear-gradient(45deg, #FFF, #F9F9F9);
    opacity: 1;

    -webkit-transition: all .2s ease;
    -moz-transition: all .2s ease;
    -o-transition: all .2s ease;
    transition: all .2s ease;
}

.pin img {
    width: 100%;
    border-bottom: 1px solid #ccc;
    padding-bottom: 15px;
    margin-bottom: 5px;
}

.pin p {
    font: 12px/18px Arial, sans-serif;
    color: #333;
    margin: 0;
}

@media (min-width: 960px) {
    #columns {
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
    }
}

@media (min-width: 1100px) {
    #columns {
        -webkit-column-count: 5;
        -moz-column-count: 5;
        column-count: 5;
    }
}

@media (min-width: 1920px) {
    #columns {
        -webkit-column-count: 7;
        -moz-column-count: 7;
        column-count: 7;
    }
    #wrapper {
        width: 90%;
        max-width: 2200px;
        min-width: 1600px;
        margin: 50px auto;
    }
}
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <title>Title</title>

        <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css">
        <link rel="stylesheet" type="text/css" href="styles/styles.css">
        <link rel="stylesheet" type="text/css" href="styles/cards.css">


        <!-- Angular Material requires Angular.js Libraries -->
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>

        <!-- Angular Material Library -->
        <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script>

        <!-- Your application bootstrap  -->
        <script type="text/javascript">
            /**
             * You must include the dependency on 'ngMaterial'
             */
            angular.module('EspanioApp', ['ngMaterial']);


        </script>

    </head>

    <body ng-app="EspanioApp" layout="row" flex>

        <div layout="column" flex>

            <div layout="row" id="PageHeader">
                <div id="TopLogo">das Logo fehlt</div>
                <div id="TopNavigation">das Menü fehlt</div>
            </div>



            <!-- https://mikethedj4.github.io/Webkit-Scrollbar-Generator/ -->
            <div layout="row" id="PageContent" flex>

                <div layout="column" id="CardColumn" flex>

                    <div id="wrapper">

                        <div id="columns">

                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>
                            <div class="pin"><img src="http://cssdeck.com/uploads/media/items/2/2v3VhAp.png" /><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed feugiat consectetur pellentesque. Nam ac elit risus, ac blandit dui. Duis rutrum porta tortor ut convallis. Duis rutrum porta tortor ut convallis.</p></div>

                        </div>

                    </div>

                </div>

            </div>

            <div layout="row" id="PageBottom">
                <div id="BottomInformation">das Impressum </div>
                <div id="BottomNavigation">das untere Menü fehlt</div>
            </div>

        </div>
    </body>









</html>

关于html - 页眉和页脚行根据内容调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41256098/

上一篇：html - 图像顶部的 Bootstrap 面包屑

下一篇：javascript - JSX 消除 HTML 中的箭头 (>)

相关文章：

javascript - 如何使用 Knockout js 和 html 显示 Google map

html - 固定导航根据背景改变不透明度

php - Bootstrap 列在 Wordpress 上发生冲突

Angular Material 表单字段标签字体颜色和大小

javascript - execCommand 向我的元素添加不需要的样式

jquery - jQuery 帖子上没有发生任何事情

javascript - 如何在html中做出绑定(bind)效果

jquery - 如何去除黄色行突出显示

javascript - Angular Material : <md-datepicker> inside <md-tabs> does not render properly

html - 设置 mat-grid 中列的比率

©2024 IT工具网  联系我们