Question

我正在尝试在我的表单下方提供内容（“我希望在表单下方”），正如您在此代码段中看到的那样，它将其置于左侧。

/*custom font*/

@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/

* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
  /*Image only BG fallback*/
  background: url('http://qases.emsreg.com/Main/images/survey_bg/gs.png');
  /*background = gradient + image pattern combo*/
  background: linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('http://qases.emsreg.com/Main/images/survey_bg/gs.png');
}
body {
  font-family: montserrat, arial, verdana;
  background-color: transparent !important;
}
/*form styles*/

#msform {
  width: 480px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}
#msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 20px 30px;
  box-sizing: border-box;
  width: 80%;
  margin: 0 10%;
  /*stacking fieldsets above each other*/
  position: absolute;
}
/*Hide all except first fieldset*/

#msform fieldset:not(:first-of-type) {
  display: none;
}
/*inputs*/

#msform input,
#msform textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 13px;
}
/*buttons*/

#msform .action-button {
  width: 100px;
  background: #27AE60;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 1px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px;
}
#msform .action-button:hover,
#msform .action-button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/

.fs-title {
  font-size: 15px;
  text-transform: uppercase;
  color: #2C3E50;
  margin-bottom: 10px;
}
.fs-subtitle {
  font-weight: normal;
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
}
/*progressbar*/

#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  /*CSS counters to number the steps*/
  counter-reset: step;
}
#progressbar li {
  list-style-type: none;
  color: white;
  text-transform: uppercase;
  font-size: 9px;
  /* width should be 100 divided by the number of steps */
  /* this is set in the code dynamically in javascript */
  width: 25%;
  float: left;
  position: relative;
}
#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 20px;
  line-height: 20px;
  display: block;
  font-size: 10px;
  color: #333;
  background: white;
  border-radius: 3px;
  margin: 0 auto 5px auto;
}
/*progressbar connectors*/

#progressbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: white;
  position: absolute;
  left: -50%;
  top: 9px;
  z-index: -1;
  /*put it behind the numbers*/
}
#progressbar li:first-child:after {
  /*connector not needed before the first step*/
  content: none;
}
/*marking active/completed steps green*/

/*The number of the step and the connector before it = green*/

#progressbar li.active:before,
#progressbar li.active:after {
  background: #27AE60;
  color: white;
}
.rbContainer {
  white-space: nowrap;
  text-align: center;
}
.rbContainerN {
  white-space: nowrap;
  text-align: center;
  margin-left: -50px;
}
.rbContainerL {
  white-space: nowrap;
  float: left;
}
.rbContainerR {
  white-space: nowrap;
  float: right;
}
.lblY {
  float: left;
}
.inY {
  float: left;
}

<body>

  <!-- multistep form -->
  <form id="msform">
    <!-- progressbar -->
    <ul id="progressbar">
      <li class="active">Step 0</li>
      <li>Step 1</li>
      <li>Step 2</li>
      <li>Step 3</li>
    </ul>
    <!-- fieldsets -->
    <fieldset>
      <h2 class="fs-title">What are the Event Details</h2>
      <h3 class="fs-subtitle">Step 1</h3> Event Name
      <input type="text" name="eventName" placeholder="EventName" />
      <label>Start&nbsp;</label>
      <input id="datepickerStart" value="" name="datepickerStart" style="width: 80%" />
      <br />
      <label>End&nbsp;&nbsp;&nbsp;</label>
      <input id="datepickerEnd" value="" name="datepickerEnd" style="width: 80%" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>

    <fieldset>
      <h2 class="fs-title">Configure your Event</h2>
      <h3 class="fs-subtitle">Step 2</h3>

      <label for="hasB">Booth Staff</label>
      <input id="hasB" type="checkbox" name="hasBoothStaff" checked="checked" />Exhibitors
      <input type="checkbox" name="hasExhibitors" checked="checked" />

      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>

    <fieldset>
      <h2 class="fs-title">Choose your Data Fields</h2>
      <h3 class="fs-subtitle">Step 3</h3>

      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>

    <fieldset>
      <h2 class="fs-title">Booth and Staff Badges</h2>
      <h3 class="fs-subtitle">Step 4</h3>
      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
      <h2 class="fs-title">Allocate</h2>
      <h3 class="fs-subtitle">Step 5</h3>

      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
      <h2 class="fs-title">Exhibitors</h2>
      <h3 class="fs-subtitle">Step 6</h3>
      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
      <h2 class="fs-title">Setup Exhibitor Admin Portal</h2>
      <h3 class="fs-subtitle">Step 7</h3>
      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="submit" class="next action-button" id="submitBtn" value="Submit" />
      <!-- <input type="submit" name="submit" class="submit action-button"  value="Submit" /> 		 -->
    </fieldset>
  </form>
  <div>
    <p>

      I want this below the form
    </p>
  </div>



</body>

在下面的另一个片段中，当我在表单中有更多内容时，我甚至无法获得低于它的余量，更不用说任何内容了。此外，在较大的形式中，渐变不会流到页面的末尾。

/*custom font*/

@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/

* {
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  /*Image only BG fallback*/
  background: url('http://qases.emsreg.com/Main/images/survey_bg/gs.png');
  /*background = gradient + image pattern combo*/
  background: linear-gradient(rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('http://qases.emsreg.com/Main/images/survey_bg/gs.png');
}

body {
  font-family: montserrat, arial, verdana;
  background-color: transparent !important;
}


/*form styles*/

#msform {
  width: 480px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}

#msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 20px 30px;
  box-sizing: border-box;
  width: 80%;
  margin: 0 10%;
  /*stacking fieldsets above each other*/
  position: absolute;
}


/*Hide all except first fieldset*/

#msform fieldset:not(:first-of-type) {
  display: none;
}


/*inputs*/

#msform input,
#msform textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 13px;
}


/*buttons*/

#msform .action-button {
  width: 100px;
  background: #27AE60;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 1px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px;
}

#msform .action-button:hover,
#msform .action-button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}


/*headings*/

.fs-title {
  font-size: 15px;
  text-transform: uppercase;
  color: #2C3E50;
  margin-bottom: 10px;
}

.fs-subtitle {
  font-weight: normal;
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
}


/*progressbar*/

#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  /*CSS counters to number the steps*/
  counter-reset: step;
}

#progressbar li {
  list-style-type: none;
  color: white;
  text-transform: uppercase;
  font-size: 9px;
  /* width should be 100 divided by the number of steps */
  /* this is set in the code dynamically in javascript */
  width: 25%;
  float: left;
  position: relative;
}

#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 20px;
  line-height: 20px;
  display: block;
  font-size: 10px;
  color: #333;
  background: white;
  border-radius: 3px;
  margin: 0 auto 5px auto;
}


/*progressbar connectors*/

#progressbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: white;
  position: absolute;
  left: -50%;
  top: 9px;
  z-index: -1;
  /*put it behind the numbers*/
}

#progressbar li:first-child:after {
  /*connector not needed before the first step*/
  content: none;
}


/*marking active/completed steps green*/


/*The number of the step and the connector before it = green*/

#progressbar li.active:before,
#progressbar li.active:after {
  background: #27AE60;
  color: white;
}

.rbContainer {
  white-space: nowrap;
  text-align: center;
}

.rbContainerN {
  white-space: nowrap;
  text-align: center;
  margin-left: -50px;
}

.rbContainerL {
  white-space: nowrap;
  float: left;
}

.rbContainerR {
  white-space: nowrap;
  float: right;
}

.lblY {
  float: left;
}

.inY {
  float: left;
}

<body>

  <!-- multistep form -->
  <form id="msform">
    <!-- progressbar -->
    <ul id="progressbar">
      <li class="active">Step 0</li>
      <li>Step 1</li>
      <li>Step 2</li>
      <li>Step 3</li>
    </ul>
    <!-- fieldsets -->
    <fieldset>
      <h2 class="fs-title">What are the Event Details</h2>
      <h3 class="fs-subtitle">Step 1</h3> Event Name
      
      <input type="text" name="eventName" placeholder="EventName" />
      <label>Start&nbsp;</label>
      <input id="datepickerStart" value="" name="datepickerStart" style="width: 80%" />
      <br />
      <label>End&nbsp;&nbsp;&nbsp;</label>
      <input id="datepickerEnd" value="" name="datepickerEnd" style="width: 80%" />
      
      <input type="text" name="eventName" placeholder="EventName" />
      <label>Start&nbsp;</label>
      <input id="datepickerStart2" value="" name="datepickerStart" style="width: 80%" />
      <br />
      <label>End&nbsp;&nbsp;&nbsp;</label>
      <input id="datepickerEnd2" value="" name="datepickerEnd" style="width: 80%" />
      
      <input type="text" name="eventName" placeholder="EventName" />
      <label>Start&nbsp;</label>
      <input id="datepickerStart3" value="" name="datepickerStart" style="width: 80%" />
      <br />
      <label>End&nbsp;&nbsp;&nbsp;</label>
      <input id="datepickerEnd3" value="" name="datepickerEnd" style="width: 80%" />      
      <br /> <br /> <br /> <br /> 
      <br /> <br /> <br /> <br /> 
      <br /> <br /> <br /> <br /> 
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>

    <fieldset>
      <h2 class="fs-title">Configure your Event</h2>
      <h3 class="fs-subtitle">Step 2</h3>

      <label for="hasB">Booth Staff</label>
      <input id="hasB" type="checkbox" name="hasBoothStaff" checked="checked" /> Exhibitors
      <input type="checkbox" name="hasExhibitors" checked="checked" />

      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>

    <fieldset>
      <h2 class="fs-title">Choose your Data Fields</h2>
      <h3 class="fs-subtitle">Step 3</h3>

      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>

    <fieldset>
      <h2 class="fs-title">Booth and Staff Badges</h2>
      <h3 class="fs-subtitle">Step 4</h3>
      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
      <h2 class="fs-title">Allocate</h2>
      <h3 class="fs-subtitle">Step 5</h3>

      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
      <h2 class="fs-title">Exhibitors</h2>
      <h3 class="fs-subtitle">Step 6</h3>
      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
      <h2 class="fs-title">Setup Exhibitor Admin Portal</h2>
      <h3 class="fs-subtitle">Step 7</h3>
      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="submit" class="next action-button" id="submitBtn" value="Submit" />
      <!-- <input type="submit" name="submit" class="submit action-button"  value="Submit" /> 		 -->
    </fieldset>
  </form>

<div>
<p>

I want this below the form
</p>
</div>


</body>

任何帮助都会很棒。

PS：该示例不起作用，但它说明了我遇到的CSS问题。

Answer 1

我相信min-height （HTML），没有absolute （fieldset）应该这样做，除非我不理解你：

/*custom font*/

@import url(http://fonts.googleapis.com/css?family=Montserrat);

/*basic reset*/

* {
  margin: 0;
  padding: 0;
}

html {
  min-height: 100%;
  /*Image only BG fallback*/
  background: url('http://qases.emsreg.com/Main/images/survey_bg/gs.png');
  /*background = gradient + image pattern combo*/
  background: linear-gradient( to bottom, rgba(196, 102, 0, 0.2), rgba(155, 89, 182, 0.2)), url('http://qases.emsreg.com/Main/images/survey_bg/gs.png');

}

body {
  font-family: montserrat, arial, verdana;
  background-color: transparent !important;
}


/*form styles*/

#msform {
  width: 480px;
  margin: 50px auto;
  text-align: center;
  position: relative;
}

#msform fieldset {
  background: white;
  border: 0 none;
  border-radius: 3px;
  box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
  padding: 20px 30px;
  box-sizing: border-box;
  width: 80%;
  margin: 0 10%;/* margin:0 auto works fine too */
  /*stacking fieldsets above each other*/
}


/*Hide all except first fieldset*/

#msform fieldset:not(:first-of-type) {
  display: none;
}


/*inputs*/

#msform input,
#msform textarea {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 3px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  font-family: montserrat;
  color: #2C3E50;
  font-size: 13px;
}


/*buttons*/

#msform .action-button {
  width: 100px;
  background: #27AE60;
  font-weight: bold;
  color: white;
  border: 0 none;
  border-radius: 1px;
  cursor: pointer;
  padding: 10px 5px;
  margin: 10px 5px;
}

#msform .action-button:hover,
#msform .action-button:focus {
  box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}


/*headings*/

.fs-title {
  font-size: 15px;
  text-transform: uppercase;
  color: #2C3E50;
  margin-bottom: 10px;
}

.fs-subtitle {
  font-weight: normal;
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
}


/*progressbar*/

#progressbar {
  margin-bottom: 30px;
  overflow: hidden;
  /*CSS counters to number the steps*/
  counter-reset: step;
}

#progressbar li {
  list-style-type: none;
  color: white;
  text-transform: uppercase;
  font-size: 9px;
  /* width should be 100 divided by the number of steps */
  /* this is set in the code dynamically in javascript */
  width: 25%;
  float: left;
  position: relative;
}

#progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 20px;
  line-height: 20px;
  display: block;
  font-size: 10px;
  color: #333;
  background: white;
  border-radius: 3px;
  margin: 0 auto 5px auto;
}


/*progressbar connectors*/

#progressbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: white;
  position: absolute;
  left: -50%;
  top: 9px;
  z-index: -1;
  /*put it behind the numbers*/
}

#progressbar li:first-child:after {
  /*connector not needed before the first step*/
  content: none;
}


/*marking active/completed steps green*/


/*The number of the step and the connector before it = green*/

#progressbar li.active:before,
#progressbar li.active:after {
  background: #27AE60;
  color: white;
}

.rbContainer {
  white-space: nowrap;
  text-align: center;
}

.rbContainerN {
  white-space: nowrap;
  text-align: center;
  margin-left: -50px;
}

.rbContainerL {
  white-space: nowrap;
  float: left;
}

.rbContainerR {
  white-space: nowrap;
  float: right;
}

.lblY {
  float: left;
}

.inY {
  float: left;
}

<body>

  <!-- multistep form -->
  <form id="msform">
    <!-- progressbar -->
    <ul id="progressbar">
      <li class="active">Step 0</li>
      <li>Step 1</li>
      <li>Step 2</li>
      <li>Step 3</li>
    </ul>
    <!-- fieldsets -->
    <fieldset>
      <h2 class="fs-title">What are the Event Details</h2>
      <h3 class="fs-subtitle">Step 1</h3> Event Name
      
      <input type="text" name="eventName" placeholder="EventName" />
      <label>Start&nbsp;</label>
      <input id="datepickerStart" value="" name="datepickerStart" style="width: 80%" />
      <br />
      <label>End&nbsp;&nbsp;&nbsp;</label>
      <input id="datepickerEnd" value="" name="datepickerEnd" style="width: 80%" />
      
      <input type="text" name="eventName" placeholder="EventName" />
      <label>Start&nbsp;</label>
      <input id="datepickerStart2" value="" name="datepickerStart" style="width: 80%" />
      <br />
      <label>End&nbsp;&nbsp;&nbsp;</label>
      <input id="datepickerEnd2" value="" name="datepickerEnd" style="width: 80%" />
      
      <input type="text" name="eventName" placeholder="EventName" />
      <label>Start&nbsp;</label>
      <input id="datepickerStart3" value="" name="datepickerStart" style="width: 80%" />
      <br />
      <label>End&nbsp;&nbsp;&nbsp;</label>
      <input id="datepickerEnd3" value="" name="datepickerEnd" style="width: 80%" />      
      <br /> <br /> <br /> <br /> 
      <br /> <br /> <br /> <br /> 
      <br /> <br /> <br /> <br /> 
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>

    <fieldset>
      <h2 class="fs-title">Configure your Event</h2>
      <h3 class="fs-subtitle">Step 2</h3>

      <label for="hasB">Booth Staff</label>
      <input id="hasB" type="checkbox" name="hasBoothStaff" checked="checked" /> Exhibitors
      <input type="checkbox" name="hasExhibitors" checked="checked" />

      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>

    <fieldset>
      <h2 class="fs-title">Choose your Data Fields</h2>
      <h3 class="fs-subtitle">Step 3</h3>

      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>

    <fieldset>
      <h2 class="fs-title">Booth and Staff Badges</h2>
      <h3 class="fs-subtitle">Step 4</h3>
      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
      <h2 class="fs-title">Allocate</h2>
      <h3 class="fs-subtitle">Step 5</h3>

      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
      <h2 class="fs-title">Exhibitors</h2>
      <h3 class="fs-subtitle">Step 6</h3>
      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="next" class="next action-button" value="Next" />
    </fieldset>
    <fieldset>
      <h2 class="fs-title">Setup Exhibitor Admin Portal</h2>
      <h3 class="fs-subtitle">Step 7</h3>
      <input type="button" name="previous" class="previous action-button" value="Previous" />
      <input type="button" name="submit" class="next action-button" id="submitBtn" value="Submit" />
      <!-- <input type="submit" name="submit" class="submit action-button"  value="Submit" /> 		 -->
    </fieldset>
  </form>

<div>
<p>

I want this below the form
</p>
</div>


</body>

CSS定位和渐变覆盖

1 个答案: