Текст застрял в нижней части Div

Question

РЕДАКТИРОВАТЬ: Спасибо, ребята, я решил это - это было гораздо проще исправить, чем ваши предложения.Просто нужно было переместить текст в div «maps» (а не в div «flex-container»), и он поместил текст прямо под ним.Спасибо за помощь, это заставило меня задуматься над этой проблемой!

Итак, внизу моего сайта у меня есть раздел div, в котором есть карта Google, а внизу должен быть текст с надписьюадрес электронной почты и физический адрес (юридического лица).

К сожалению, этот текст случайным образом перемещается вниз, как показано в самом низу этого веб-сайта:

http://website.sme.sh.s3 -website-eu-west-1.amazonaws.com

Ниже приведен код, который, я думаю, влияет на него -

.page {
    display: inline-block;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    width: 100vw;
    text-align: center;
    margin: auto;
}

.flex-container {
    height: 100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.map {
    width: 60%;
    height: 50%;
    min-width: 20em;
}

<div class="page get-in-touch">
        <div class="flex-container">
            <div class="map">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.2326378518164!2d-0.08973764855540126!3d51.52729277953841!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761ca5df3ab397%3A0xb76b90b168bccd4d!2sSmesh!5e0!3m2!1sen!2suk!4v1528291922909" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
            </div>
        </div>  
    <a href="mailto:hello@sme.sh" style="color: #000;"><u>hello@sme.sh</u></a> <a style="color: #000;"> | 20 East Road, London, N1 6AD</a>
</div>

Есть ли что-то, что я пропустил в своем коде?

Answer 1

Просто установите высоту и ширину .map на 100% и используйте отступы для пробелов вокруг карты.

Объяснение:

Основная проблема заключалась в том, что карта находилась в гибком контейнере, который имел определенную высоту икарта используется только как 60% высоты.В этом причина пустого пространства между картой и вашим текстом.

Есть вопросы?:)

РЕДАКТИРОВАТЬ Мой Плохой единственный настоящий необходимый шаг - это высота и ширина .map.Я удалил другие инструкции, чтобы избежать беспорядочной путаницы.

Answer 2

Попробуйте это ...

	
 
 .page {
    display: inline-block;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    width: 100vw;
    text-align: center;
    margin: auto;
}

.flex-container {
    height: 100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.map {
    width: 60%;
    height: 50%;
    min-width: 20em;
}

<div class="page get-in-touch">
        <div class="flex-container">
            <div class="map">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.2326378518164!2d-0.08973764855540126!3d51.52729277953841!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761ca5df3ab397%3A0xb76b90b168bccd4d!2sSmesh!5e0!3m2!1sen!2suk!4v1528291922909" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
            </div>
 <p><a href="mailto:hello@sme.sh" style="color: #000;"><u>hello@sme.sh</u></a> <a style="color: #000;"> | 20 East Road, London, N1 6AD</a></p>
        </div>  
   
</div>

Answer 3

На самом деле, это не случайно.Текст должен быть там, поскольку у вас есть flex-container перед тегом <a>.Внутри flex-container у вас есть только карта 50% в height, поэтому вы можете чувствовать себя случайным, когда у вас другой экран / разрешение.

Вы можете переместить <a> внутриflex-container или вы можете указать класс карты 100% в height

.page {
    display: inline-block;
    min-height: 100vh;
    background-size: cover;
    background-position: center;
    width: 100vw;
    text-align: center;
    margin: auto;
}

.flex-container {
    height: 100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.map {
    width: 60%;
    height: 100%;
    min-width: 20em;
}

<div class="page get-in-touch">
        <div class="flex-container">
            <div class="map">
                <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2482.2326378518164!2d-0.08973764855540126!3d51.52729277953841!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761ca5df3ab397%3A0xb76b90b168bccd4d!2sSmesh!5e0!3m2!1sen!2suk!4v1528291922909" width="100%" height="100%" frameborder="0" style="border:0" allowfullscreen></iframe>
            </div>
        </div>  
    <a href="mailto:hello@sme.sh" style="color: #000;"><u>hello@sme.sh</u></a> <a style="color: #000;"> | 20 East Road, London, N1 6AD</a>
</div>

Answer 4

Это связано с тем, что ваш тег <a href="mailto:"></a> и ваш адресный тег находятся вне класса flex-container.

Чтобы исправить , поместите два тега <a> в класс flex-container и расположите их так, как вам нравится.

Или уменьшите height вашего flex-container класса