html - 引导CSS

发布于 2020-03-29 12:58:01

我正在使用引导程序和一些自定义CSS来制作布局原型。我有一个容器流体的div，然后是两行。第一行包含三列，第二行仅包含全宽div。

一切都很好，直到我减小窗口大小并达到断点并且设计变得敏感为止，除了第二个具有全宽度div的行，它似乎漂浮在第一行元素上，而不是停留在底部。

当客户端较小时，如何使第二行固定在底部。

请注意，第一行设置为扩展并填充屏幕的剩余高度，第二行的高度固定为50px。

从https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/获取的引导程序

屏幕截图效果（HTML之后）

HTML模板

@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');

html,
body {
    height: 100%;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #dedee1;
}

#ctr-main {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.red-border {
    border: 1px red solid;
}

.blue-border {
    border: 1px blue solid;
}

.panel {
    width: 100%;
    background-color: rgba(218, 226, 254, 0.63);
    margin-top: 5px;
    overflow: hidden;
}

#panel-ticket-tabs {
    height: 50px;
}

#panel-ticket-meta {
    height: 100px;
}

#panel-status {
    height: 150px;
}

#panel-customer-info {
    height: 150px;
}

#panel-customer-history {
    height: 250px;
}

#panel-customer-shortcuts {
    height: 250px;
}

#panel-ticket {
    /*height:500px;*/
    flex-grow: 1;
}

#panel-channels {
    height: 500px;
}

#panel-tools {
    /*flex-grow: 1;*/
}

#panel-bottom-bar {
    width: 100%;
    height: 50px;
    background-color: #2e57cc;
    display: block;
    position: relative;
    text-align: left;
}

.pnl-title {
    width: 100%;
    height: 25px;
    vertical-align: middle;
    color: white;
    font-size: 1em;
    font-weight: bold;
    background-color: #2e57cc;
    overflow: hidden;
    line-height: 25px;
    padding-left: 5px;
    /*! border-bottom: 2px solid #22366f; */
}

.row-flex {
    flex: 1;
}

.column-flex {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.panel-height-filler {
    display: flex;
    flex-flow: column;
    height: 100%;
    flex: 1 1 auto;
}

.pnl-round-corner-bottom {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.pnl-round-corner {
    border-radius: 10px;
}

.pnl-square {
    border-radius: 0;
}

.pnl-border {
    border: 1px solid #000335;
}

.pnlSection {
    background-color: #fff;
    width:98%;
    min-height:25px;
    margin: 0 auto;
    z-index: 20;
}

.pnlSection-border {
    border:1px solid black;
}

#pnlSection-user-tabs {
    background-color: transparent;
    z-index: 25;
}

#pnlSection-channels {
    margin-top: -1px;
}


.tabButton {
    display:inline-block;
    border-radius: 5px 5px 0 0;
    background-color: #d6d6d6;
    height: 30px;
    width: 100px;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    line-height: 30px;
    border-bottom: 1px solid black;
}

.tabButton > span {
    display:block;
    font-weight: bold;
    color:black;
    font-size:12px;
    padding:0;
    margin:auto 0;
    /*! line-height: normal; */
    text-align: center;
}

.tabButton:hover {
    background-color: #ffffff;
    cursor: pointer;
}

#panel-bottom-bar > .icon-container {
    color: white;
    display: inline-block;
    position: relative;
    margin: 7px 0 auto .25em;
    border: white 1px solid;
    padding:2px;
    border-radius: 5px;
    overflow:hidden;
}

#panel-bottom-bar > .icon-container:hover {
    background-color:white;
    color:#2e57cc;
    border-color:#2e57cc;
    cursor:pointer;
}

#panel-bottom-bar > .icon-container.active {
    background-color:white;
    color:#2e57cc;
    border-color:#2e57cc;
}

.activeTab {
    background-color: white;
    border-bottom: 0;
}

.alertTab {
    background-color: #e57616;
}

.pnl-outer-shadow {
    -webkit-box-shadow: 3px 3px 5px 6px #9c9c9c; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow: 3px 3px 5px 6px #9c9c9c; /* Firefox 3.5 - 3.6 */
    box-shadow: 3px 3px 5px 6px #9c9c9c; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.pnl-inner-shadow {
    -moz-box-shadow: inset 0 0 10px #9c9c9c;
    -webkit-box-shadow: inset 0 0 10px #9c9c9c;
    box-shadow: inset 0 0 10px #9c9c9c;
}

.pnl-bend-shadow-bottom {
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
}

#ctr-main > div.container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

#column-left > div.row {
    margin: 0 0 0 2px;
}

#column-middle > div.row {
    margin: 0 2px 0 2px;
}

#column-right > div.row {
    margin: 0 2px 0 0;
}

#column-left {
    /*! vertical-align: top; */
    /*! margin: auto; */
    margin-top: 0;
    padding-left: 5px;
}

#column-right {
    padding-right: 5px;
}

#column-middle {
    padding-left: 5px;
    padding-right: 5px;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Prototype1 - Main</title>
    <!-- Styles and links to JS removed for clarity -->
</head>

<body>

<div id="ctr-main" class="container-fluid">
    <div class="row row-flex">
        <div class="col-sm-3 column-flex" id="column-left">
            <div id="panel-status" class="panel pnl-round-corner-bottom pnl-border">
                <h2 class="pnl-title">Console</h2>
            </div>
            <div id="panel-channels" class="panel panel-height-filler pnl-round-corner-bottom pnl-border">
                <h2 class="pnl-title">Channel selector</h2>
                <div id="pnlSection-user-tabs" class="pnlSection">
                    <div class="tabButton activeTab"><span>Customers</span></div>
                    <div class="tabButton alertTab"><span>Agents</span></div>
                    <div class="tabButton"><span>Administrators</span></div>
                </div>
                <div id="pnlSection-channels" class="pnlSection pnlSection-border">

                </div>
            </div>
        </div>
        <div class="col-sm-6 column-flex" id="column-middle">
            <div id="panel-ticket" class="panel panel-height-filler pnl-round-corner-bottom pnl-border">
                <h2 class="pnl-title">Ticket details</h2>
            </div>
        </div>
        <div class="col-sm-3 column-flex" id="column-right">
            <div id="panel-tools" class="panel panel-height-filler pnl-round-corner-bottom pnl-border">
                <h2 class="pnl-title">Tools</h2>
            </div>
        </div>
    </div>
    <div class="row">
        <div id="panel-bottom-bar" class="panel pnl-square pnl-border">
            <div class="icon-container">
                <span class="icon-home"></span>
            </div>
        </div>
    </div>
</div>

</body>

</html>

提问者

John Cogan

被浏览

查看英文版

查看原文

Mihai T 2020-01-31 17:17

高高100%在column-flex这里不起作用。100%什么？那就是问题所在。您应该使用，auto因为它在上设置了固定的高度，所以它占用了其内容的高度panels。

您应该将此添加到媒体查询中。参见下面的代码或-> JsFiddle

html,
body {
    height: 100%;
    margin: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #dedee1;
}

#ctr-main {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.red-border {
    border: 1px red solid;
}

.blue-border {
    border: 1px blue solid;
}

.panel {
    width: 100%;
    background-color: rgba(218, 226, 254, 0.63);
    margin-top: 5px;
    overflow: hidden;
}

#panel-ticket-tabs {
    height: 50px;
}

#panel-ticket-meta {
    height: 100px;
}

#panel-status {
    height: 150px;
}

#panel-customer-info {
    height: 150px;
}

#panel-customer-history {
    height: 250px;
}

#panel-customer-shortcuts {
    height: 250px;
}

#panel-ticket {
    /*height:500px;*/
    flex-grow: 1;
}

#panel-channels {
    height: 500px;
}

#panel-tools {
    /*flex-grow: 1;*/
}

#panel-bottom-bar {
    width: 100%;
    height: 50px;
    background-color: #2e57cc;
    display: block;
    position: relative;
    text-align: left;
}

.pnl-title {
    width: 100%;
    height: 25px;
    vertical-align: middle;
    color: white;
    font-size: 1em;
    font-weight: bold;
    background-color: #2e57cc;
    overflow: hidden;
    line-height: 25px;
    padding-left: 5px;
    /*! border-bottom: 2px solid #22366f; */
}

.row-flex {
    flex: 1;
}

.column-flex {
    display: flex;
    flex-flow: column;
    height:100%
}

.panel-height-filler {
    display: flex;
    flex-flow: column;
    height: 100%;
    flex: 1 1 auto;
}

.pnl-round-corner-bottom {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.pnl-round-corner {
    border-radius: 10px;
}

.pnl-square {
    border-radius: 0;
}

.pnl-border {
    border: 1px solid #000335;
}

.pnlSection {
    background-color: #fff;
    width:98%;
    min-height:25px;
    margin: 0 auto;
    z-index: 20;
}

.pnlSection-border {
    border:1px solid black;
}

#pnlSection-user-tabs {
    background-color: transparent;
    z-index: 25;
}

#pnlSection-channels {
    margin-top: -1px;
}


.tabButton {
    display:inline-block;
    border-radius: 5px 5px 0 0;
    background-color: #d6d6d6;
    height: 30px;
    width: 100px;
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    line-height: 30px;
    border-bottom: 1px solid black;
}

.tabButton > span {
    display:block;
    font-weight: bold;
    color:black;
    font-size:12px;
    padding:0;
    margin:auto 0;
    /*! line-height: normal; */
    text-align: center;
}

.tabButton:hover {
    background-color: #ffffff;
    cursor: pointer;
}

#panel-bottom-bar > .icon-container {
    color: white;
    display: inline-block;
    position: relative;
    margin: 7px 0 auto .25em;
    border: white 1px solid;
    padding:2px;
    border-radius: 5px;
    overflow:hidden;
}

#panel-bottom-bar > .icon-container:hover {
    background-color:white;
    color:#2e57cc;
    border-color:#2e57cc;
    cursor:pointer;
}

#panel-bottom-bar > .icon-container.active {
    background-color:white;
    color:#2e57cc;
    border-color:#2e57cc;
}

.activeTab {
    background-color: white;
    border-bottom: 0;
}

.alertTab {
    background-color: #e57616;
}

.pnl-outer-shadow {
    -webkit-box-shadow: 3px 3px 5px 6px #9c9c9c; /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow: 3px 3px 5px 6px #9c9c9c; /* Firefox 3.5 - 3.6 */
    box-shadow: 3px 3px 5px 6px #9c9c9c; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.pnl-inner-shadow {
    -moz-box-shadow: inset 0 0 10px #9c9c9c;
    -webkit-box-shadow: inset 0 0 10px #9c9c9c;
    box-shadow: inset 0 0 10px #9c9c9c;
}

.pnl-bend-shadow-bottom {
    -webkit-box-shadow: 0 10px 6px -6px #777;
    -moz-box-shadow: 0 10px 6px -6px #777;
    box-shadow: 0 10px 6px -6px #777;
}

#ctr-main > div.container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

#column-left > div.row {
    margin: 0 0 0 2px;
}

#column-middle > div.row {
    margin: 0 2px 0 2px;
}

#column-right > div.row {
    margin: 0 2px 0 0;
}

#column-left {
    /*! vertical-align: top; */
    /*! margin: auto; */
    margin-top: 0;
    padding-left: 5px;
}

#column-right {
    padding-right: 5px;
}

#column-middle {
    padding-left: 5px;
    padding-right: 5px;
}
/* add breakpoint */
@media only screen(max-width:550px) {
  .column-flex {
    height:auto;
    min-height:100vh;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet"/>
<div id="ctr-main" class="container-fluid">
    <div class="row row-flex">
        <div class="col-sm-3 column-flex" id="column-left">
            <div id="panel-status" class="panel pnl-round-corner-bottom pnl-border">
                <h2 class="pnl-title">Console</h2>
            </div>
            <div id="panel-channels" class="panel panel-height-filler pnl-round-corner-bottom pnl-border">
                <h2 class="pnl-title">Channel selector</h2>
                <div id="pnlSection-user-tabs" class="pnlSection">
                    <div class="tabButton activeTab"><span>Customers</span></div>
                    <div class="tabButton alertTab"><span>Agents</span></div>
                    <div class="tabButton"><span>Administrators</span></div>
                </div>
                <div id="pnlSection-channels" class="pnlSection pnlSection-border">

                </div>
            </div>
        </div>
        <div class="col-sm-6 column-flex" id="column-middle">
            <div id="panel-ticket" class="panel panel-height-filler pnl-round-corner-bottom pnl-border">
                <h2 class="pnl-title">Ticket details</h2>
            </div>
        </div>
        <div class="col-sm-3 column-flex" id="column-right">
            <div id="panel-tools" class="panel panel-height-filler pnl-round-corner-bottom pnl-border">
                <h2 class="pnl-title">Tools</h2>
            </div>
        </div>
    </div>
    <div class="row">
        <div id="panel-bottom-bar" class="panel pnl-square pnl-border">
            <div class="icon-container">
                <span class="icon-home"></span>
            </div>
        </div>
    </div>
</div>

html - 引导CSS

热门帖子

相关问题

热门github