Javascript I'；m添加<；李>；通过我的提交按钮，它正在通过我的div。我的js函数可以'；我修不好
因此，我试图使页面继续添加列表项，而不中断body元素，如图所示 我想保留body和div中的所有列表项，就像前几个一样。我最好的办法是使用JS底部的if语句重新运行autoResizeDiv。谢谢你的帮助 JS HTMLJavascript I'；m添加<；李>；通过我的提交按钮，它正在通过我的div。我的js函数可以'；我修不好,javascript,jquery,html,css,Javascript,Jquery,Html,Css,因此，我试图使页面继续添加列表项，而不中断body元素，如图所示 我想保留body和div中的所有列表项，就像前几个一样。我最好的办法是使用JS底部的if语句重新运行autoResizeDiv。谢谢你的帮助 JS HTML JavaScript基础：变量 html{ 背景：#FAFAFA； 字体系列：无衬线； } 列斯金 买杂货 “狮子非常棒，玩起来很有趣，而且经常小便” -J.K.咆哮 新鲜无花果 松仁 蜂蜜 香醋 新项目 请查看您的CSS，并将#页面div调整为溢出，或完全删除高度
JavaScript基础：变量
html{
背景：#FAFAFA；
字体系列：无衬线；
}
列斯金
买杂货
“狮子非常棒，玩起来很有趣，而且经常小便”
-J.K.咆哮
新鲜无花果
松仁
蜂蜜
香醋
新项目
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
overflow: scroll;
}
尝试将您的身高：100%更改为最小身高：100%；
制作ul overflow-y:scroll也解决了这个问题，但是如果你将div设置为固定高度，滚动条可能会破坏你的外观。在我看来，问题在于你在css的#页面中设置了高度。您需要设置溢出：滚动；或者删除高度。可以将overflow设置为auto，div将在需要时具有滚动条如果使用
overflow:auto@media screen and (max-width:700px) {
body {
background: #111;
background-size: 780px;
font-family: 'Dosis', sans-serif;
color: white;
display: block;
height:100%;
}
h1, h2, p {
text-align: center;
}
img {
max-width: 50px;
/* display: inline-block; */
/* margin: 4% 0 0% 165px;*/
padding: 10% 45% 0 44%;
/* vertical-align: middle;*/
/* position: absolute;*/
}
h1 {
margin: -1% 0 0 0;
font-size: .8rem;
letter-spacing: 1.2px;
}
h2 {
min-width: 70%;
letter-spacing: 8px;
text-transform: uppercase;
margin: 5% 0 4% 0%;
font-size: 1.4rem;
}
div {
margin: auto;
background: #222;
width: 360px;
}
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
}
ul {
list-style: none;
padding: 0;
margin: 5%;
}
li:nth-child(-n+3) {
background-color: #B80000;
}
li:nth-child(n+4) {
background-color: coral;
}
li {
margin: .3% -5.2% .3% -5.2%;
padding: 12px 0 1px 16px;
height: 35px;
font-size: 1.1rem;
/* width: 100%;*/
/*text-align: 30% 0 30% 30%*/
}
p {
color: #111;
background: #FFF;
border-radius: 1.5% / 10%;
font-size: .85rem;
margin: 0% 10%;
}
#newItemButton {
position: absolute;
background: #222;
}
#newItemForm {
display: -webkit-flex;
-webkit-flex-direction: row;
-webkit-justify-content: center;
-webkit-flex-wrap: wrap;
background: #222;
z-index: 10; position:relative
}
#itemDescription {
margin: 3.8px 10px 0 0;
width: 68%;
border: none;
border-radius: 2.5% / 18%;
/* padding: 10px 0 0 0;*/
font-size: 1rem;
text-align: left;
text-indent: 10px;
}
#addButton, #showForm {
background: #B80000;
border: none;
text-transform: uppercase;
font-weight: bold;
font-size: 1rem;
color: white;
letter-spacing: .9px;
text-align: center;
}
#addButton {
border-radius: 8% / 20%;
padding: 10px 22px;
margin: 3px 0px 0 0;
}
#showForm {
border-radius: 3% / 11%;
padding: 10px 22px;
margin: 3px 17px 0 0;
float: right;
}
<!DOCTYPE html>
<html lang="en">
<script src="jquery-1.11.2.min.js"></script>
<script src="jquery-1.11.2.js"></script>
<script src="myscript.js"></script>
<link href='http://fonts.googleapis.com/css?family=Dosis:300|Yanone+Kaffeesatz'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="main.css">
<head>
<title> JavaScript Foundations: Variables</title>
<style>
html {
background: #FAFAFA;
font-family: sans-serif;
}
</style>
</head>
<body id="body">
<div id="page">
<img src="lion.png" alt="there's supposed to be a lion">
<h1 id="header">LISTKING</h1>
<h2>Buy Groceries</h2>
<p>"Lions are awesome, fun to play with, and have to pee a lot"
-J.K. Growling</p>
<ul>
<li id="one" class="hot"><em>fresh</em> figs</li>
<li id="two" class="hot">pine nuts</li>
<li id="three" class="hot">honey</li>
<li id="four">balsamic vinegar</li>
</ul>
<div id="newItemButton"><button href="#" id="showForm">new item</button></div>
<form id="newItemForm">
<input type="text" id="itemDescription" placeholder="Add description..." />
<input type="submit" id="addButton" value="add" />
</form>
</div>
</body>
</html>
#page {
/* padding: auto;*/
/* display: inline-block;*/
height: 465px;
overflow: scroll;
}