Chiều cao bằng nhau Nội dung và Thanh bên trong Mẫu Genesis 2.6.0

Bạn đang tìm cách đặt cùng một chiều cao cho nội dung và thanh bên trong Genesis? Flexbox để giải cứu.

Hướng dẫn này cung cấp sự thay đổi mã để thay thế float bằng Flexbox trong CSS của Genesis Sample 2.6.0 cho các cột nội dung và thanh bên có chiều cao bằng nhau (được xác định bởi cái nào cao hơn).

Trong truy vấn phương tiện chiều rộng tối thiểu 960px bên trong style.css , hãy thay thế

/* Content
--------------------------------------------- */

.content {
    float: left;
    width: 65%;
}

.sidebar-content .content {
    float: right;
}

.full-width-content .content,
.landing-page .content {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

/* Sidebar
--------------------------------------------- */

.sidebar {
    float: right;
    width: 30%;
}

.sidebar-content .sidebar {
    float: left;
}

với

/* Content
--------------------------------------------- */

.content-sidebar-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.content {
    width: 65%;
}

.full-width-content .content {
    width: 100%;
}

.sidebar-content .sidebar {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
}

.sidebar-content .content {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
}

/* Sidebar
--------------------------------------------- */

.sidebar {
    width: 30%;
}