在容器末端的自举4行,高度为100%

所以我已经尽力了,但是我仍然无法获得想要的东西。

我有一个包含min-height: 100px;height: 100%的容器。在那个容器中,我有两行。见下图。 我希望第2行位于容器的末尾

在容器末端的自举4行,高度为100%

这是代码:

<div class="container-fluid full-height">
    <div class="row"> <!-- ROW 1  -->
        <div class="col-12 item-title bg-info">
            <h2> Fortress </h2>
        </div>
        <div class="col-12 item-description bg-danger">
            Niš Fortress is a fortress in the city of Niš,Serbia. It is a complex and important cultural and
            historical monument. It rises on the right bank of the Nišava River,overlooking the area inhabited
            for longer than two millennia.

            It was protected by law in May 1948 as it was declared a cultural site of great significance. The
            current condition of the fortress lists it as one of the best preserved fortifications of this kind
            in Serbia as well as on the Balkan Peninsula.
        </div>
    </div>
    <div class="row"> <!-- ROW 2  -->
        <div class="col-xl-6 col-md-8 col-sm-12 bg-info">
            <div class="container-fluid no-lf-padding">
                <div class="row">
                    <div class="col-6">
                        Work hours:
                    </div>
                    <div class="col-6">
                        Monday 12:00 - 16:00
                    </div>
                    <div class="col-6">
                        Tuesday 12:00 - 16:00
                    </div>
                    <div class="col-6">
                        Wednesday 12:00 - 16:00
                    </div>
                    <div class="col-6">
                        Thursday 12:00 - 16:00
                    </div>
                    <div class="col-6">
                        Friday 12:00 - 16:00
                    </div>
                    <div class="col-6">
                        Saturday 12:00 - 16:00
                    </div>
                    <div class="col-6">
                        Sunday 12:00 - 16:00
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-6 col-md-4 col-sm-12 bg-warning">
            <div class="container-fluid no-lf-padding">
                <div class="row">
                    <div class="col-12">
                        Adress
                    </div>
                    <div class="col-12">
                        Phone
                    </div>
                    <div class="col-12">
                        Website
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

这是CSS:

.no-lf-margin {
    margin-left: 0;
    margin-right: 0;
}

.no-lf-padding {
    padding-left: 0;
    padding-right: 0;
}
/*HERE IS FOR THE CONTAINER*/
     .full-height {
        min-height: 100%;
        height: 100%;
    }

我尝试过:

  • align-items-end添加到第2行,没有任何变化。
  • 创建一个<div class="container align-self-end"> ROW AND CODE HERE </div>,尝试将align-self-end保留下来,没有变化。

我想念什么?

这是JSFiddle:https://jsfiddle.net/a1e0htsw/

tarenamis 回答:在容器末端的自举4行,高度为100%

如果我对您的理解正确的话,应该可以使用flex来实现。

<div class="main-container">
  <div class="row-one">
  </div>
  <div class="row-two">
  </div>
</div>

并添加CSS

.main-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  height: 100%;
}
,

首先body应该占据视口的所有可用空间(100vh)。由于您使用的是Bootstrap,因此可以将这些类添加到container

h-100 d-flex flex-column justify-content-between

没有Bootstrap应该是:

.container-fluid.full-height {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

在第二行中添加align-items-end无效,因为它引用的是子元素,而不是self元素。

代码:

body {
  height: 100vh;
}

.no-lf-margin {
    margin-left: 0;
    margin-right: 0;
}

.no-lf-padding {
    padding-left: 0;
    padding-right: 0;
}
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        
        <div class="container-fluid h-100 d-flex flex-column justify-content-between">
            <div class="row">
                <div class="col-12 item-title bg-info">
                    <h2> Fortress </h2>
                </div>
                <div class="col-12 item-description bg-danger">
                    Niš Fortress is a fortress in the city of Niš,Serbia. It is a complex and important cultural and
                    historical monument. It rises on the right bank of the Nišava River,overlooking the area inhabited
                    for longer than two millennia.

                    It was protected by law in May 1948 as it was declared a cultural site of great significance. The
                    current condition of the fortress lists it as one of the best preserved fortifications of this kind
                    in Serbia as well as on the Balkan Peninsula.
                </div>
            </div>
            <div class="row">
                <div class="col-xl-6 col-md-8 col-sm-12 bg-info">
                    <div class="container-fluid no-lf-padding">
                        <div class="row">
                            <div class="col-6">
                                Work hours:
                            </div>
                            <div class="col-6">
                                Monday 12:00 - 16:00
                            </div>
                            <div class="col-6">
                                Tuesday 12:00 - 16:00
                            </div>
                            <div class="col-6">
                                Wednesday 12:00 - 16:00
                            </div>
                            <div class="col-6">
                                Thursday 12:00 - 16:00
                            </div>
                            <div class="col-6">
                                Friday 12:00 - 16:00
                            </div>
                            <div class="col-6">
                                Saturday 12:00 - 16:00
                            </div>
                            <div class="col-6">
                                Sunday 12:00 - 16:00
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6 col-md-4 col-sm-12 bg-warning">
                    <div class="container-fluid no-lf-padding">
                        <div class="row">
                            <div class="col-12">
                                Adress
                            </div>
                            <div class="col-12">
                                Phone
                            </div>
                            <div class="col-12">
                                Website
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

,

您需要在容器上使用flex-fill类和flexbox(d-flex flex-column)...

    <div class="container-fluid full-height d-flex flex-column">
        <div class="row">
            ..
        </div>
        <div class="row align-items-end flex-fill">
            <div class="col-xl-6 col-md-8 col-sm-12 bg-info">
                ..
            </div>
            <div class="col-xl-6 col-md-4 col-sm-12 bg-warning">
                ..
            </div>
        </div>
    </div>

https://www.codeply.com/p/LIQzZfOsDF

,

您必须首先将display:flex添加到容器,然后添加flex-grow:1;到第一行。

.body-wrapper
        {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        .row
        {
            padding: 2rem;
            color: #fff;
        }

        .section1{
            background-color: #f00;
            flex-grow: 1;
        }

        .section2{
            background-color: #00f;
        }
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    
    <div class="container-fluid body-wrapper">
        <div class="row section1">
            Lorem ipsum dolor sit amet,consectetur adipisicing elit. Consequuntur delectus ipsa perferendis provident quae quam! Aliquam blanditiis corporis itaque laudantium nihil obcaecati ratione temporibus! Est pariatur perferendis rerum soluta veniam?
        </div>

        <div class="row section2">
            Lorem ipsum dolor sit amet,consectetur adipisicing elit. Cum delectus distinctio eum libero minima odit,possimus rem! Autem consequuntur fugiat id magnam necessitatibus nihil obcaecati tempore unde? Reprehenderit,ut,velit.
        </div>
    </div>

本文链接:https://www.f2er.com/3099588.html

大家都在问