html с двумя столбцами один фиксированный в зависимости от высоты содержимого - PullRequest
0 голосов
/ 20 апреля 2020

Я создаю свой веб-сайт и не могу создать два столбца и установить фиксированное положение в левом столбце только тогда, когда его содержимое выходит из строя Это мой код

<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

/* LEFT */
.sidenav {
  float: left;
  width: 50%; 
  top: 60px;
  position: fixed;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

/*RIGHT*/
.main {
  margin-left: 50%;
  margin-right: 0;
  font-size: 15px; 
}
/* CSS */
</style>
</head>
<body>
<div class="row">
<div class="sidenav" id="Homeleft" align="justify">
<p> Albert Einstein (/ˈaɪnstaɪn/ EYEN-styne;[4] German: [ˈalbɛʁt ˈʔaɪnʃtaɪn] (About this soundlisten); March 14, 1879 – April 18, 1955) was a German-born theoretical physicist[5] who developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).
</div><!-- Homeleft -->

<div class="main" id="Homeright" align="justify">
<p> Albert Einstein (/ˈaɪnstaɪn/ EYEN-styne;[4] German: [ˈalbɛʁt ˈʔaɪnʃtaɪn] (About this soundlisten); March 14, 1879 – April 18, 1955) was a German-born theoretical physicist[5] who developed the theory of relativity, one of the two pillars of modern physics (alongside quantum mechanics).[3][6]:274 His work is also known for its influence on the philosophy of science.[7][8] He is best known to the general public for his mass–energy equivalence formula {\displaystyle E=mc^{2}}E = mc^2, which has been dubbed "the world's most famous equation".[9] He received the 1921 Nobel Prize in Physics "for his services to theoretical physics, and especially for his discovery of the law of the photoelectric effect",[10] a pivotal step in the development of quantum theory.

The son of a salesman who later operated an electrochemical factory, Einstein was born in the German Empire but moved to Switzerland in 1895 and renounced his German citizenship in 1896.[5] Specializing in physics and mathematics, he received his academic teaching diploma from the Swiss Federal Polytechnic School (German: eidgenössische polytechnische Schule, later ETH) in Zürich in 1900. The following year, he acquired Swiss citizenship, which he kept for his entire life. After initially struggling to find work, from 1902 to 1909 he was employed as a patent examiner at the Swiss Patent Office in Bern.</p>

</div><!-- HomerightContent -->
</div>
</body>
</html> 

В этом коде я установил левый столбец фиксированным. Но иногда содержание может быть вне потока, и я меняю позицию. Например, я могу изменить настройки, если на экране моего устройства меньше 430px, как указано ниже.

   @media screen and (max-height: 430px) {
     .sidenav {
        position: static;
        /* other changes */
      }
    }

Однако это не совсем то, что я хочу сделать. Я хочу, например, использовать переменную для измерения высоты содержимого левого столбца, изменить положение на stati c и вносить другие изменения только в том случае, если эта высота больше высоты экрана. Есть идеи?

1 Ответ

1 голос
/ 20 апреля 2020

вы можете сделать это, используя jquery, вам нужно захватить элемент, который вы хотите знать, его высоту, и подумать о том, чтобы применить все, что вы хотите, это также будет использоваться для вас при изменении размера окна ... Вот Пример кода:

function handleMyDivPosition() {
    var height = $(“#div-i-want-height”).height();
    if(height > 111) {
        // position fixed
    } else {
        // position absolute
    }
}
$(window).on(”resize”,function () {
    handleMyDivPosition();
}).resize();

Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...