我正在尝试根据 div 标签内的内容调整边框高度。目前，边框值/属性放置在“body CSS”中，但因为我在一种形式中有很多 div 标签，所以我不确定这是否会把事情搞砸。
简单说明一下:我没有制作 CSS。其他人制作了它，我必须将它用于我现在正在做的事情。
body{
padding-left: 10%;
padding-right: 10%;
border-style: solid; /*WHERE THE BORDER IS MADE*/
margin: 10%;
}
#Q{
text-align: left;
}
h1{
text-align: center;
margin-top: 20px;
}
button{
height: 3em;
width: 6em;
}
p.title{
text-align: center;
}
#title{
text-align: center;
}
.center{
text-align: center;
font-size: 1.5em;
}
input, select{
margin: 1.5%;
}
ul{
margin: 2%;
}
h2{
text-align: center;
}
.partner1{
text-align: left;
}
.partner2{
text-align: right;
}
table{
padding: 5%;
width: 100%;
}
th{
text-align: center;
}
/*
div{
padding-left: 10%;
padding-right: 10%;
border-style: solid;
margin: 10%;
}*/
.page{
position: absolute;
top: 35%;
left: 10%;
right: 10%;
padding-left: 10%;
padding-right: 10%;
visibility: hidden;
}<body>
<h1>Meeting 1</h1>
<form id="meeting1" method="POST" action="javascript:void(0)" onSubmit="showValues(this)">
<div id="page1" class="page" style="visibility:visible;">
<!-- Some code here -->
</div>
<div id="page2" class="page">
<!-- Some code here -->
<div id="page3" class="page">
<!-- Some code here -->
</div>
</form>第3页的内容比显示屏幕多(高度)，但边框不会调整大小来包裹所有内容。事实上，边框大小在我创建的 3 个“子表单”中保持不变。如果我放置“border-style: solid;”插入 div CSS，它的边框会自行调整，但我想在边框/框内包含写“Meeting 1”的文本，我认为必须将 h1 标签中的“Meeting 1”放入其中效率不高每个 div 标签。有人可以帮我解决这个问题吗？提前致谢!
最佳答案
试试下面的代码
body{
padding-left: 10%;
padding-right: 10%;
margin: 10%;
}
#Q{
text-align: left;
}
h1{
text-align: center;
margin-top: 20px;
}
button{
height: 3em;
width: 6em;
}
p.title{
text-align: center;
}
#title{
text-align: center;
}
.center{
text-align: center;
font-size: 1.5em;
}
input, select{
margin: 1.5%;
}
ul{
margin: 2%;
}
h2{
text-align: center;
}
.partner1{
text-align: left;
}
.partner2{
text-align: right;
}
table{
padding: 5%;
width: 100%;
}
th{
text-align: center;
}
/*
div{
padding-left: 10%;
padding-right: 10%;
border-style: solid;
margin: 10%;
}*/
.page{
position: relative;
margin:10px;
padding-left: 10%;
padding-right: 10%;
visibility: hidden;
border-style: solid; /*WHERE THE BORDER IS MADE*/
}
form {
top: 35%;
left: 10%;
right: 10%;
position: absolute;
}<body>
<form id="meeting1" method="POST" action="javascript:void(0)" onSubmit="showValues(this)">
<div id="page1" class="page" style="visibility:visible;">
<h1>Page 1</h1>
</div>
<div id="page2" class="page" style="visibility:visible;">
<h1>Page 2</h1></br>
<h1>Page 2</h1></br>
<div id="page3" class="page">
<!-- Some code here -->
</div>
</form>关于html - CSS 使边框高度适应内容大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33789061/