Css отзывчивый абсолютный div внутри относительного div

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

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

var openSide = false;

function side() {
  if (!openSide) {

    document.getElementById("main").style.marginLeft = "15%";
    document.getElementById("main").style.paddingLeft = "10px";
    document.getElementById("mySidebar").style.width = "15%";
    document.getElementById("mySidebar").style.display = "block";
    // document.getElementById("openNav").style.display = 'none
    openSide = true;
  } else {
    document.getElementById("main").style.marginLeft = "0%";
    document.getElementById("mySidebar").style.display = "none";
    document.getElementById("openNav").style.display = "inline-block";
    openSide = false;
  }

  console.log(openSide);
}
/* The sidebar menu */

.sidenav {
  /*/height: 100%; /* Full-height: remove this if you want "auto" height */
  width: 15%;
  /* Set the width of the sidebar */
  position: fixed;
  /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1;
  /* Stay on top */
  top: 70;
  /* Stay at the top */
  left: 0;
  background-color: #111;
  /* Black */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 20px;
  display: none;
  margin-left: 10px;
}


/* The navigation menu links */

.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}


/* When you mouse over the navigation links, change their color */

.sidenav a:hover {
  color: #f1f1f1;
}


/* Style page content */

#main {
  margin-left: 0%;
  /* Same as the width of the sidebar */
  margin-right: 15%;
  padding-left: 10px;
  padding-right: 20px;
}

body {
  margin-left: 10px;
}

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container>div {
  background-color: red;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

#map {
  /*padding: 100px 100px 100px 100px;*/
  position: relative;
  width: 100%;
  height: 600px;
  top: 100px;
  background: yellow;
}

.media {
  position: absolute;
  width: 11.07%;
  height: 16.66%;
  background-color: red;
}

.media:first-child {
  margin-top: 15;
}

#m1 {
  background: blue;
  left: 400px;
  top: 400px;
}

.media:hover {
  background-color: pink;
  z-index: 1000;
  width: 200px;
  height: 200px;
}


/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="assets/css/css.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<button id="openNav" class="w3-button w3-teal w3-xlarge" onclick="side()">&#9776;</button>

<div id="header">
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
    	        <span class="icon-bar"></span>
    	        <span class="icon-bar"></span>
    	        <span class="icon-bar"></span>                        
    	      </button>
        <a class="navbar-brand" href="#">WebSiteName</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
        </ul>
      </div>
    </div>
  </nav>
</div>




<!-- Side navigation -->
<div class="sidenav" id="mySidebar">
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>



<div id="main">

  <div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
  </div>



  <div id="map">
    <div class="container">

      <div class="media" style="left:465px;top:340px; background:red;">h</div>
      <div class="media" style="left:530px;top:250px; background:blue;">g</div>
      <div class="media" style="left:465px;top:175px;background:green ">f</div>
      <div class="media" style="left:400px;top:100px;background:red">e</div>
      <div class="media" style="left:335px;top:175px; background:blue">d</div>
      <div class="media" style="left:270px;top:250px; background:green;">c</div>
      <div class="media" style="left:335px;top:325px;">b</div>
      <div class="media" id="m1">a</div>
    </div>
  </div>

  <div class='circle-container'>
    <a href='#' class='center'><img src='image.jpg'></a>
    <a href='#' class='deg0'><img src='image.jpg'></a>
    <a href='#' class='deg45'><img src='image.jpg'></a>
    <a href='#' class='deg135'><img src='image.jpg'></a>
    <a href='#' class='deg180'><img src='image.jpg'></a>
    <a href='#' class='deg225'><img src='image.jpg'></a>
    <a href='#' class='deg315'><img src='image.jpg'></a>
  </div>

  <div class="jumbotron text-center" style="margin-bottom:0">
    <p>Footer</p>
  </div>


</div>

Не используйте px для размещения ваших элементов. Используйте %, чтобы они адаптировались к размеру родительского div. top: 20%; left: 40%;

Jeremy Thille 10.08.2018 15:38

Вы хотите, чтобы он реагировал, но вы используете абсолютные единицы - я бы прочитал об абсолютных и относительных единицах

Pete 10.08.2018 15:40

Если вы пытаетесь центрировать элементы, flexbox - ваш лучший друг.

Reyedy 10.08.2018 15:42

Моя проблема в том, что если я помещаю div в центр, желтый (большой) div сжимается, но div внутри не остается посередине, а всегда в исходном месте.

D.duarte 10.08.2018 15:42

Я начал с px, но затем перешел на% и все еще не смог добиться того, что хотел. Размеры div меняются, но они не следуют. @Driblou, я пробовал, но я не хочу, чтобы они были в центре, я хочу, чтобы они делали что-то вроде круга

D.duarte 10.08.2018 15:43
0
5
2 788
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как отмечали другие комментаторы, использование % как для позиционирования, так и для определения размеров содержащихся элементов является здесь хорошим подходом.

Вы также можете использовать vmin для установки width и height в .container, чтобы убедиться, что независимо от того, уменьшается ли область просмотра по горизонтали или вертикали, она остается видимой полностью.

Рабочий пример:

.container {
position: relative;
width: 100vmin;
height: 100vmin;
background-color: yellow;
}

.container div {
position: absolute;
width: 6%;
height: 9%;
transform: translateX(-50%);
}

.a {
top: 60%;
left: 50%;
background-color: blue;
}

.b {
top: 52%;
left: 40%;
background-color: red;
}

.c {
top: 44%;
left: 30%;
background-color: green;
}

.d {
top: 36%;
left: 40%;
background-color: blue;
}

.e {
top: 28%;
left: 50%;
background-color: red;
}

.f {
top: 36%;
left: 60%;
background-color: green;
}

.g {
top: 44%;
left: 70%;
background-color: blue;
}

.h {
top: 52%;
left: 60%;
background-color: red;
}
<div class="container">

<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
<div class="g"></div>
<div class="h"></div>
</div>

Другие вопросы по теме