JavaScript — как установить боковую панель и высоту содержимого в реагировать?

Как установить боковую панель и высоту содержимого в реакции?

Flexbox отлично подойдет для вашего сайта, и большинство, на мой взгляд. Я также избегал бы использования 100vh для ваших высот, когда это возможно. Это установит высоту для высоты просмотра вашего экрана при загрузке, а не для высоты всей вашей страницы, если она прокручивается за пределы высоты экрана.

Если вы хотите, чтобы боковая панель занимала всю высоту страницы, вы можете установить ее в window.outerHeight . Пример ниже:

 const Sidebar = () ={amp}gt; { // Variable to get window view height const viewHeight = window.outerHeight; return ( {amp}lt;Router{amp}gt; // added the style to the div, the .sidenav style will still work from your app.css sheet as well {amp}lt;div style={{ height: viewHeight }} className="sidenav"{amp}gt; {amp}lt;Link to="/"{amp}gt;{amp}lt;p{amp}gt;First Blog{amp}lt;/p{amp}gt;{amp}lt;/Link{amp}gt; {amp}lt;Link to="/"{amp}gt;{amp}lt;p{amp}gt;First Blog{amp}lt;/p{amp}gt;{amp}lt;/Link{amp}gt; {amp}lt;Link to="/"{amp}gt;{amp}lt;p{amp}gt;First Blog{amp}lt;/p{amp}gt;{amp}lt;/Link{amp}gt; {amp}lt;Link to="/"{amp}gt;{amp}lt;p{amp}gt;First Blog{amp}lt;/p{amp}gt;{amp}lt;/Link{amp}gt; {amp}lt;Link to="/"{amp}gt;{amp}lt;p{amp}gt;First Blog{amp}lt;/p{amp}gt;{amp}lt;/Link{amp}gt; {amp}lt;Link to="/"{amp}gt;{amp}lt;p{amp}gt;First Blog{amp}lt;/p{amp}gt;{amp}lt;/Link{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div className="contents"{amp}gt; {amp}lt;Switch{amp}gt; {amp}lt;Route exact path="/"{amp}gt; {amp}lt;BlogContents/{amp}gt; {amp}lt;/Route{amp}gt; {amp}lt;/Switch{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/Router{amp}gt; )}; 

Для вашего img вы захотите, чтобы его ширина составляла%, поэтому он будет подстраиваться под разные размеры экрана. Вам нужно только дать img ширину, высота будет создана автоматически на основе соотношения сторон изображения. Я бы также установил max-width чтобы изображение не захватывало экран на больших экранах. Попробуйте приведенный ниже код для вашего img :

 img { width: 50%; max-width: 400px; margin-left: 80px; } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector