gpt4 book ai didi

html - 有没有办法强制 HTML
    为固定大小以制作 SPA?

转载 作者:行者123 更新时间:2023-11-27 23:10:33 25 4
gpt4 key购买 nike

我想为元素制作 SPA。这个想法是人们可以通过 PIN 或其他方式连接到该站点。在他们的手机上,他们可以用他们的名字提问。所有问题都显示为左侧边栏中的垂直无序列表,所选问题在中间显示为大,所有已回答的问题都移至右侧边栏中的类似列表。

目前,列表工作正常,但一旦问题超过四个,列表就会变得比页面本身还高,我认为这很糟糕。我想让它滚动,但高度有限。

我尝试过的:

  • 我已经尝试将 heightmax-height 属性设置为 100vh,并将 overflow-y 设置为滚动,但没有实际上不允许我滚动列表。

在样式表中:

li {
text-align: left;
font-family: 'Quicksand', sans-serif;
list-style-type: none;

overflow-y: auto;
max-height: 100vh;
height: 100vh;
}

在我的 HTML 中:

 <body>
<script src="backend.js"></script>
<div class="wrapper">
<div class="vragenLijst">
<ul style="padding-left: 10px; padding-right: 10px" id="lijst">
<li>
<div>
<p class="vrager">Persoon 1</p>
<br>
<p class="vraagt">vraagt:</p>
<br>
<p class="vraagEl">Dit is mijn vraag.</p>
</div>
</li>
<li>
<div>
<p class="vrager">Persoon nummer twee</p>
<br>
<p class="vraagt">vraagt:</p>
<br>
<p class="vraagEl">Hier komt mijn vraag dan, zeer origineel.</p>
</div>
</li>
<li>
<div>
<p class="vrager">Persoon nummer 3</p>
<br>
<p class="vraagt">wilt weten:</p>
<br>
<p class="vraagEl">En wederom wat opvultekst hier.</p>
</div>
</li>
<li>
<div>
<p class="vrager">Vierde persoon</p>
<br>
<p class="vraagt">wilt weten:</p>
<br>
<p class="vraagEl">Zo he, een vierde vraag? Allemachtig...</p>
</div>
</li>
</ul>
</div>
<div class="vergroot">
<p id="groteVrager">Naam</p>
<p id="groteVraagt">vraagt:</p>
<p id="groteVraag">vraag</p>
<input type="button" value="Volgende vraag" class="button" onclick="nieuweVraag()">

<input type="button" value="JA" class="button" onclick="nieuweVraag(0)">
<input type="button" value="NEE" class="button" onclick="nieuweVraag(1)">
<input type="button" value="NIET RELEVANT" class="button" nieuweVraag(2)="antwoord(2)">


</div>
<div class="sidebar">
<ul id="beantwoordeVragen">

</ul>
</div>
</div>
<div class="footer">
Idee en code door Simeon Duwel, gelicenciëerd onder MIT ca. 2019
</div>
</body>

最佳答案

设置overflow-y:autoheight: <desired-height>ul 应该可以。

例如,下面我有一个高度为 50 vh 的 ul。出于演示目的,我有一个 100vh 的黄色 div。如您所见,ul 高度固定为 div 的一半,并且任何溢出滚动。

ul {
height: 50vh;
background-color:white;
overflow-y:auto;
}

li {
height: 10vh;
}

body,ul {
margin:0;
}
<div style="height:100vh;background-color:yellow">
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
<li>Test 7</li>
<li>Test 8</li>
<li>Test 9</li>
<li>Test 10</li>
</ul>
</div>

关于html - 有没有办法强制 HTML <ul> 为固定大小以制作 SPA?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58548889/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com