页眉和页脚行按内容

时间：2016-12-21 05:58:55

标签： html css angular-material

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

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

如何防止此行为？

1 个答案:

答案 0 :(得分：3)

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

在此代码中将 min-height：175px; 添加到 #PageHeader，＃menuBottom 它会正常工作。我已添加以下代码段

＆＃13;
＆＃13; 
*{
    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;
    }
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题