Question

我正在尝试根据div标签内的内容调整边框高度。目前，边框值/属性放在“body CSS”中，但因为我在一个表单中有很多div标签，所以我不确定这是否会弄乱。

快速说明：我没有制作CSS。别人做了它，我必须把它用于我现在正在做的事情。

<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>

function formatData(data){
   var result = [];
   for(prop in data['indices']){
      if(data['indices'].hasOwnProperty(prop)){
         result.push({ 'indices': prop });
      }
   }
   return result;
}

第3页的内容占用的内容多于显示屏（高度方面），但边框不会调整其大小以包装所有内容。事实上，在我创建的3个“子表单”中，边框大小保持不变。如果我放置“border-style：solid;”组成div CSS，它边框调整自己，但我想在边框/框内包含写“会议1”的文本，我认为不必将h1标签中的“Meeting 1”放入每个div标签。有人可以帮我这个吗？提前谢谢！

Answer 1

尝试以下代码

＆＃13;

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;
    }

＆＃13;

<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>

＆＃13;

CSS使边框高度适应内容大小

1 个答案: