Блог

Главная - Вопросы по программированию - Как создать сегменты в контейнере div

Как создать сегменты в контейнере div

#html #css

#HTML #css

Вопрос:

Итак, я хочу добиться следующего, что я нарисовал:

введите описание изображения здесь

а зеленый div — это внешний div, а внутри div есть div, который я планирую использовать для карты. Теперь проблема, с которой я сталкиваюсь сейчас, заключается в том, как разместить div в нижней части внешнего div? Я хочу, чтобы он был каким-то образом заблокирован в этой позиции, поэтому, когда я изменяю размер браузера, он останется в своем текущем положении, а карта div не будет перемещаться.

Я попытался использовать «margin-top: 59vh», но когда я настраиваю высоту своего браузера, он переполняется и становится странным:

введите описание изображения здесь

Был бы признателен за помощь в этом.

 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    font-size: 1vw;
}

body {
    height: 100%;
}

#outer {
    border: 1px solid black;
    height: 90vh;
    width: 35%;
}

#map_div {
    border: 1px solid blue;
    height: 300px;
    margin-top: 59vh;
} 
 <!DOCTYPE html>
<html lang="en">  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "style.css">
  <title>Document</title>
</head>
<body>
  <div id = "outer">
    <div id = "map_div"></div>
  </div>
</body>
</html>

Ответ №1:

Удалить margin-top: 59vh из #map_div и добавить display: flex , flex-direction: column , и justify-content: flex-end в #outer 

 <style>
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
    font-size: 1vw;
}

body {
    height: 100%;
}

#outer {
    border: 1px solid black;
    height: 90vh;
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#map_div {
    border: 1px solid blue;
    height: 300px;
}
</style>

<!DOCTYPE html>
<html lang="en">  
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href = "style.css">
  <title>Document</title>
</head>
<body>
  <div id = "outer">
    <div id = "map_div"></div>
  </div>
</body>
</html>