прокручиваемый контент в процентном размере - PullRequest
Новая
       14

прокручиваемый контент в процентном размере

2 голосов
/ 02 мая 2019

Я получил контейнер div и содержимое div.Размер контента имеет фиксированную высоту и ширину.Я бы хотел, чтобы контейнер имел относительный размер (в процентах), но когда я не использую фиксированные значения пикселей, высота кажется равной 100%, независимо от того, какой процент я указываю ...

Html: 

<div class="container">
  <div class="content">
  Content
  </div>
</div>

Css: 

.container {
  overflow: auto;
  height: 50%;  /* percentage value does not work */
}

.content {
  background-color: blue;
  width: 800px;
  height: 600px;
  overflow: hidden;
}

https://jsfiddle.net/LePioo/2pcaq45x/55/

Ответы [ 2 ]

2 голосов
/ 02 мая 2019

Я не знаю, если это то, что вы пытаетесь достичь, но вы можете использовать vh на контейнере, и появится прокрутка, и ваш контент div останется таким же, как вы. 

.container {
  overflow: auto;
  height: 50vw; 
}
1 голос
/ 02 мая 2019

Использование процентной высоты не будет / не будет работать, потому что атрибуту высоты нечего измерять по высоте.Если бы атрибуты div были поменяны местами, а контейнер имел высоту 600px, тогда div содержимого унаследовал бы это измерение высоты, а если его высота была установлена ​​на 50%, он бы увеличился до 300px, если вы понимаете, что я имею в виду ... Как естьв контейнере div нет ничего, кроме другого div, и у него нет родителя для наследования.

Короче говоря, вы должны использовать vh (вертикальная высота) для динамической высоты. 

.container {
  display: inline-block;
  overflow: auto;
  height: 50vh; 
}

.content {
  background-color: blue;
  width: 800px;
  height: 600px;
  overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  
<div class="container">
  <div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis lacus dolor, ut pretium metus luctus volutpat. Nulla eleifend purus bibendum lectus posuere, non feugiat lorem porttitor. Aenean at sapien est. Vivamus urna massa, vestibulum at augue sit amet, vehicula fermentum justo. Mauris vulputate dictum sapien fermentum scelerisque. Vestibulum id augue feugiat, laoreet libero non, aliquam dolor. Vestibulum molestie, arcu a tincidunt maximus, ipsum urna euismod lectus, ac eleifend erat neque vitae nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur non diam sed diam aliquam sodales sodales gravida lectus. Nunc elementum mauris a convallis dignissim. Phasellus augue tortor, tincidunt eget leo vitae, semper auctor est. Donec posuere diam ut venenatis laoreet. Sed ac metus eleifend, iaculis tortor vel, finibus nibh. Aliquam imperdiet, felis id tincidunt maximus, purus libero fermentum tellus, non suscipit ante magna a tortor. Sed finibus, risus nec laoreet ullamcorper, lectus ipsum consectetur magna, et condimentum neque quam non libero. Pellentesque bibendum, turpis eu lacinia varius, est massa placerat ante, vitae convallis purus orci volutpat tellus.
  </div>
</div>
</body>
</html>

Иллюстрация унаследованной / рубленной высоты (переполнение установлено для прокрутки, чтобы вы могли видеть границы) 

.container {
  display: inline-block;
  overflow: scroll;
   width: 400px;
  height: 200px;
}

.content {
  background-color: blue;
 height:50%;
  overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Test</title>
  <link rel="stylesheet" href="css/style.css">
</head>

<body>
  
<div class="container">
  <div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mattis lacus dolor, ut pretium metus luctus volutpat. Nulla eleifend purus bibendum lectus posuere, non feugiat lorem porttitor. Aenean at sapien est. Vivamus urna massa, vestibulum at augue sit amet, vehicula fermentum justo. Mauris vulputate dictum sapien fermentum scelerisque. Vestibulum id augue feugiat, laoreet libero non, aliquam dolor. Vestibulum molestie, arcu a tincidunt maximus, ipsum urna euismod lectus, ac eleifend erat neque vitae nunc. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur non diam sed diam aliquam sodales sodales gravida lectus. Nunc elementum mauris a convallis dignissim. Phasellus augue tortor, tincidunt eget leo vitae, semper auctor est. Donec posuere diam ut venenatis laoreet. Sed ac metus eleifend, iaculis tortor vel, finibus nibh. Aliquam imperdiet, felis id tincidunt maximus, purus libero fermentum tellus, non suscipit ante magna a tortor. Sed finibus, risus nec laoreet ullamcorper, lectus ipsum consectetur magna, et condimentum neque quam non libero. Pellentesque bibendum, turpis eu lacinia varius, est massa placerat ante, vitae convallis purus orci volutpat tellus.
  </div>
</div>
</body>
</html>
...