css 当我隐藏一个元素并显示另一个元素时，其他div移动了,如何阻止这种情况？

nzrxty8p  于 2023-02-20  发布在  其他
关注(0)|答案(2)|浏览(233)

我创建了一个页面，其中的div在单击按钮时会被另一个div替换。它们具有相似的属性，但当我单击按钮时，其他一些元素会移动。由于某种原因，当替换第一个div高度的div小于页面高度时，其他div不会移动，但当div高度大于页面高度时，其他元素会移动
当中间部分适合页面时，没有任何内容移动：我将向您展示我在这里的意思：

当中间部分不适合页面时，某些元素会向左移动：

请全屏打开以查看：

function showResults() {
  document.getElementById("inputSection").style.display = "none";
  document.getElementById('hideButton').style.display = "none";
  document.getElementById("Calories").style.display = "block";
  document.getElementById("Protein").style.display = "block";
  document.getElementById("Carbs").style.display = "block";
}
@import "calorie-calculator.css";
.banner {
  /* Banner Styles */
  width: 100%;
  color: black;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 24px;
  float: left;
  text-decoration: none;
  cursor: pointer;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.noselect {
  /* No Highlighting */
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.banner-head-1 {
  /* Home Header */
  float: left;
  overflow-wrap: normal;
  margin-left: 200px;
  margin-right: 200px;
  text-decoration: none;
  color: black;
  display: block;
}

.banner-head-2 {
  /* Food Header */
  float: left;
  overflow-wrap: normal;
  margin-left: 55px;
  text-decoration: none;
  color: black;
  display: block;
}

.banner-head-3 {
  /* Exercise Header */
  float: left;
  overflow-wrap: normal;
  margin-left: 55px;
  text-decoration: none;
  color: black;
  display: block;
}

.banner-head-4 {
  /* Calculators Header */
  float: left;
  overflow-wrap: normal;
  margin-left: 55px;
  text-decoration: none;
  color: black;
  display: block;
}

.banner-head-5 {
  /* Calculators Header */
  float: left;
  overflow-wrap: normal;
  margin-left: 55px;
  text-decoration: none;
  color: black;
  display: block;
}

.dropdown {
  /* Dropdown Content */
  cursor: pointer;
  color: black;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 24px;
  display: none;
  position: absolute;
  width: 100%;
  float: left;
  text-decoration: none;
  padding-right: 80px;
  margin: 0px;
  border: 0px;
}

.noDecoration {
  /* No Text Decoration */
  text-decoration: none;
  color: black;
}

.dropdown-content {
  display: none;
  padding-left: 20px;
}

.banner-logo {
  height: 40px;
  border: 10px solid white;
  border-radius: 12px;
  margin-top: 5px;
}

.banner-logo-responsive {
  margin-left: 150px;
  height: 43px;
  margin-top: 5px;
  margin-bottom: 5px;
  border: 10px solid white;
  border-radius: 12px;
  margin-left: 350px;
}

.mobile-logo {
  height: 80px;
  padding: none;
  border: 10px white solid;
  border-radius: 8px;
}

.main-section {
  padding-top: 79px;
  padding-left: 500px;
  width: 903px;
  font-family: 'Anton', sans-serif;
  display: block;
  object-fit: cover;
}

.background {
  float: left;
  position: fixed;
  top: 0px;
  left: 0px;
}

.wholeArea {
  position: absolute;
  height: auto;
  top: 0;
  right: 0;
}

.title {
  font-size: 60px;
  color: #132c54;
  padding-bottom: 10px;
}

.description {
  font-size: 25px;
  color: #2569c8;
  line-height: 29px;
  margin-bottom: 8px;
}

.inputText {
  font-size: 30px;
  color: #132c54;
  background-color: white;
}

.inputField {
  font-size: 30px;
  color: #132c54;
  border-color: #132c54;
  border-width: 4px;
  border-style: solid;
  outline-color: #132c54;
  border-radius: 6px;
}

.noDecoration {
  /* No Text Decoration */
  text-decoration: none;
  color: #132c54;
}

.selectInput {
  width: 413px;
  color: #132c54;
  outline-color: #132c54;
  outline-width: 0px;
  border-color: #132c54;
  border-width: 4px;
  border-style: solid;
  border-radius: 6px;
}

.textInput {
  width: 400px;
  display: inline;
  color: #132c54;
  outline-color: #132c54;
  outline-width: 0px;
  border-color: #132c54;
  border-width: 4px;
  border-style: solid;
  border-radius: 6px;
  padding-left: 3px;
}

.selectOption {
  font-size: 30px;
  color: #132c54;
}

.buttonStyle {
  font-size: 35px;
  color: #132c54;
  background-color: white;
  outline-color: #132c54;
  outline-width: 0px;
  border-color: #132c54;
  border-width: 4px;
  border-style: solid;
  border-radius: 6px;
}

.buttonToggleStyle {
  font-size: 25px;
  color: #132c54;
  background-color: white;
  outline-color: #132c54;
  outline-width: 0px;
  border-color: #132c54;
  border-width: 4px;
  border-style: solid;
  border-radius: 6px;
  margin-right: 20px;
}

.radioStyle {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: top;
}

.leftColumnBox {
  position: absolute;
  margin-right: 100px;
  width: auto;
  height: auto;
}

.leftColumnBox2 {
  position: absolute;
  margin-top: 321px;
  margin-right: 100px;
  width: auto;
  height: auto;
}

.rightColumnBox {
  position: absolute;
  margin-right: 100px;
  width: auto;
  height: auto;
}

.rightColumnBox2 {
  position: absolute;
  margin-top: 321px;
  margin-right: 100px;
  width: auto;
  height: auto;
}

.leftColumn {
  width: auto;
  height: auto;
  margin-top: 81px;
  margin-left: 100px;
  margin-right: 100px;
  float: left;
  position: fixed;
  display: inline;
  top: 0px;
  left: 0px;
}

.rightColumn {
  width: auto;
  height: auto;
  margin-top: 81px;
  margin-left: 100px;
  margin-right: 400px;
  float: left;
  position: fixed;
  display: inline;
  top: 0px;
  right: 0px;
}

.advertImage {
  border: 10px white solid;
  border-radius: 6px;
  width: 300px;
  height: auto;
}

.resultsSection {
  display: none;
  position: inherit;
}

.radioArea {
  height: 45px;
  width: 700px;
  display: block;
}

.inputArea {
  height: 50px;
  width: 700px;
  display: block;
}

.labelText {
  width: 150px;
  display: inline-block;
}

.resultsText {
  line-height: 38px;
}

.resultsHeaderText {
  line-height: 40px;
  padding: 0px;
  border: 0px;
  margin: 0px;
  margin-bottom: 10px;
}

.hideInput {
  display: block;
}

.mainBorder {
  border: 20px solid white;
  border-radius: 12px;
  background-color: white;
}

.titleBorder {
  border: 20px solid white;
  border-bottom: none;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: white;
}

.descBorder {
  border: 20px solid white;
  border-top: none;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  background-color: white;
}

.tabContent {
  display: none;
  margin-bottom: 8px;
}

.tabSwitch {
  margin-bottom: 8px;
}

@media screen and (min-width: 1920px) {
  /* Responsive */
  .main-section {
    padding-top: 79px;
    padding-left: 27%;
    padding-right: 0px;
    width: 47%;
  }
}

@media screen and (max-width: 1920px) {
  .main-section {
    padding-top: 79px;
    padding-left: 27%;
    padding-right: 0px;
    width: 47%;
  }
}

@media screen and (min-width: 1920px) {
  /* Responsive */
  .banner-head-1 {
    /* Home Header */
    margin-left: 170px;
    margin-right: 200px;
  }
  .banner-head-2 {
    /* Food Header */
    margin-left: 55px;
  }
  .banner-head-3 {
    /* Exercise Header */
    margin-left: 55px;
  }
  .banner-head-4 {
    /* Calculators Header */
    margin-left: 55px;
  }
  .banner-head-5 {
    /* Calculators Header */
    margin-left: 55px;
  }
}

@media screen and (max-width: 1920px) {
  .banner-head-1 {
    /* Home Header */
    margin-left: 170px;
    margin-right: 200px;
  }
  .banner-head-2 {
    /* Food Header */
    margin-left: 55px;
  }
  .banner-head-3 {
    /* Exercise Header */
    margin-left: 55px;
  }
  .banner-head-4 {
    /* Calculators Header */
    margin-left: 55px;
  }
  .banner-head-5 {
    /* Calculators Header */
    margin-left: 55px;
  }
}
<!DOCTYPE html>
<html>

<head>
  <script src="./script/banner.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./style/banner.css">
  <link rel="stylesheet" href="./style/calorie-calculator.css">
  <link rel="stylesheet" href="./style/css-reset.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Anton&display=swap" rel="stylesheet">
</head>
<div id="background" class="background"></div>
<span class="wholeArea">
<table class="banner noselect"> <!-- Banner -->
      <tr>
          <th class="banner-head-1"><a href="./index.html" class="noDecoration banner-logo">img</a></th>
          <th class="banner-head-2"><a href="./food-tracker.html" class="noDecoration banner-logo">img</a></th>
          <th class="banner-head-3"><a href="./articles.html" class="noDecoration banner-logo">img</a></th>
          <th class="banner-head-4"><a href="./calculators.html" class="noDecoration banner-logo">img</a></th>
          <th class="banner-head-5"><a href="./exercise-tracker.html" class="noDecoration banner-logo"></a>img</th>
      </tr>
</table>
<div class="main-section noDecoration">
<div>    <!-- Title -->
  <p class="title titleBorder">CALORIE CALCULATOR</p>    <!-- Title -->
  <p class="description descBorder">This calculator will estimate how many calories your body needs to consume based on your weight, height and age and other factors. This is also a guide to maintain, gain or lose weight</p><!-- Description -->
</div>
<div class="mainBorder calculatorSection" id="inputSection">    <!-- Calculator -->
    <div class="radioArea" style="padding-bottom: 5px;" id="input1">
      <label class="inputText noDecoration labelText">Units</label>
      <a href="./calorie-calculator.html">
         <input type="radio" class="inputField radioStyle" onclick="window.location='./calorie-calculator.html'">
         <label class="inputText noDecoration">Metric</label>
      </a>
     <a href="./calorie-calculator-imperial.html">
          <input type="radio" class="inputField radioStyle" onclick="window.location='./calorie-calculator-imperial.html'">
          <label class="inputText noDecoration">Imperial</label><br>
      </a>
    </div>
    <div class="radioArea" id="input2">
      <label for="gender" class="inputText labelText">Gender</label>
      <input type="radio" id="Male" name="gender" value="5" class="inputField radioStyle">
      <label for="Male" class="inputText">Male</label>
      <input type="radio" id="Female" name="gender" value="-165" class="inputField radioStyle">
      <label for="Female" class="inputText">Female</label><br>
    </div>
    <div class="inputArea" id="input3">
      <label for="Input1" class="inputText labelText">Age</label>
      <input type="number" id="Input1" class="inputField textInput" placeholder="12-80"><br>
    </div>
    <div class="inputArea" id="input4">
      <label for="Input2" class="inputText labelText">Height</label>
      <input type="number" id="Input2" class="inputField textInput" placeholder="100cm - 200cm"><br>
    </div>
    <div class="inputArea" id="input5">
     <label for="Input3"class="inputText labelText">Weight</label>
     <input type="number" id="Input3" class="inputField textInput" placeholder="30kg - 120kg"><br>
    </div>
    <div class="inputArea" id="input6">
      <label for="exerciseInput"class="inputText labelText">Exercise</label>
      <select id="exerciseInput" class="inputText selectInput">
        <option class="inputText selectOption">Exercise</option>
        <option value="noExercise" id="noExercise" class=" selectOption">Inactive</option>
        <option value="lightExercise" id="lightExercise" class=" selectOption">Light Activity</option>
        <option value="moderateExercise" id="moderateExercise" class=" selectOption">Moderate Activity</option>
        <option value="activeExercise" id="activeExercise" class=" selectOption">Active</option>
        <option value="veryActiveExercise" id="veryActiveExercise" class=" selectOption">Very Active</option>
        <option value="extraActiveExercise" id="extraActiveExercise" class=" selectOption">Extra Active</option>
     </select>
    </div>
    <button class="buttonStyle" onclick="showResults();" id="hideButton">ADD</button>
</div>

<div id="Calories" class="tabContent mainBorder">
  <div class="resultsHeaderText">Calories</div>
  <div class="resultsText">Extreme Weight Gain(1kg/week) - <span id="extremeGain1" class=""></span></div>
<div class="resultsText">Weight Gain(0.5kg/week) - <span id="averageGain1" class=""></span></div>
<div class="resultsText">Mild Weight Gain(0.25kg/week) - <span id="mildGain1" class=""></span></div>
<div class="resultsText">Maintain Calories - <span id="maintain1" class=""></span></div>
<div class="resultsText">Mild Weight Loss(0.25kg/week) - <span id="mildLoss1" class=""></span></div>
<div class="resultsText">Weight Loss(0.5kg/week) - <span id="averageLoss1" class=""></span></div>
<div class="resultsText">Extreme Weight Loss(1kg/week) - <span id="extremeLoss1" class=""></span></div>
</div>

<div id="Protein" class="tabContent mainBorder">
  <div class="resultsHeaderText">Protein</div>
  <div class="resultsText">Extreme Weight Gain(1kg/week) - <span id="extremeGain2" class=""></span></div>
  <div class="resultsText">Weight Gain(0.5kg/week) - <span id="averageGain2" class=""></span></div>
  <div class="resultsText">Mild Weight Gain(0.25kg/week) - <span id="mildGain2" class=""></span></div>
  <div class="resultsText">Maintain Calories - <span id="maintain2" class=""></span></div>
  <div class="resultsText">Mild Weight Loss(0.25kg/week) - <span id="mildLoss2" class=""></span></div>
  <div class="resultsText">Weight Loss(0.5kg/week) - <span id="averageLoss2" class=""></span></div>
  <div class="resultsText">Extreme Weight Loss(1kg/week) - <span id="extremeLoss2" class=""></span></div>
</div>

<div id="Carbs" class="tabContent mainBorder">
  <div class="resultsHeaderText">Carbs</div>
  <div class="resultsText">Extreme Weight Gain(1kg/week) - <span id="extremeGain3" class=""></span></div>
  <div class="resultsText">Weight Gain(0.5kg/week) - <span id="averageGain3" class=""></span></div>
  <div class="resultsText">Mild Weight Gain(0.25kg/week) - <span id="mildGain3" class=""></span></div>
  <div class="resultsText">Maintain Calories - <span id="maintain3" class=""></span></div>
  <div class="resultsText">Mild Weight Loss(0.25kg/week) - <span id="mildLoss3" class=""></span></div>
  <div class="resultsText">Weight Loss(0.5kg/week) - <span id="averageLoss3" class=""></span></div>
  <div class="resultsText">Extreme Weight Loss(1kg/week) - <span id="extremeLoss3" class=""></span></div>
</div>

</div>
<div class="leftColumn">
  <div class="leftColumnBox"><img src="./img/advert-1.png" class="advertImage"></div>
  <div class="leftColumnBox2"><img src="./img/advert-2.png" class="advertImage"></div>
</div>
<div class="rightColumn">
  <div class="rightColumnBox"><img src="./img/advert-3.png" class="advertImage"></div>
  <div class="rightColumnBox2"><img src="./img/advert-4.png" class="advertImage"></div>
</div>
</span>

</html>
css

2条答案

按热度按时间
w46czmvw

w46czmvw1#

使用display: none代替visibility: hidden。
使用display: block代替visibility: visible。

赞(0）分享  回复(0）举报  2023-02-20
au9on6nz

au9on6nz2#

使用可见性：
可见性：可见
可见性：隐藏

赞(0）分享  回复(0）举报  2023-02-20
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com