如何平均缩小顶部和底部边距但保持中心菜单一致？

Question

请参考this image.这会让事情更容易理解，而不是看代码。
我正在尝试设计一个始终位于页面正中心的菜单。
只有在边距完全消失后，菜单才会缩小。
起初它似乎很简单，但令我沮丧的是，我了解到 CSS 在缩小页面时会尝试将菜单和边距压缩到一个小区域。

body, html
{
  overflow: hidden; /* Prevent browser from displaying scroll-bars */
  background-color: #f1f1f1;

  /* Force the HTML and Body to fill entire window */
  width:  100%;
  height: 100%;
  /* ------------------------------------------------------------------------- */
}

/* Removes margins and padding on all HTML-CSS elements.  */
/* This is so that we don't run into any unecessary whitespace during website design*/
body, html, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td
{
    margin: 0px;
    padding: 0px;
}

body
{
  position: relative;
  z-index: 0;
}

div.Top-Margin
{
  position: relative;
  z-index: 1;

  /* background-color: #f1f1f1; */
  background-color: orange; /* TODO: visibility purposes, only for TESTING */
  height: 25%;
}

div.Center-Margin
{
  position: relative;
  z-index: 1;

  background-color: pink; /* TODO: visibility purposes, only for TESTING */
  height: 50%;
}

div.Bottom-Margin
{
  position: relative;
  z-index: 1;

  /* background-color: #f1f1f1; */
  background-color: yellow; /* TODO: Visibility purposes, only for TESTING */
  width: 100%;
  height: 25%;
}

/* Consistent style between desktop and mobile*/
div.Menu-Container
{
  position: absolute;
  top: 25%;
  left: 45%;
  z-index: 2;
}

@keyframes rainbow-border
{
  0%   {border-color: #ff0000;}
  10%  {border-color: #ff8000;}
  20%  {border-color: #ffff00;}
  30%  {border-color: #80ff00;}
  40%  {border-color: #00ff00;}
  50%  {border-color: #00ff80;}
  60%  {border-color: #00ffff;}
  70%  {border-color: #0080ff;}
  80%  {border-color: #0000ff;}
  90%  {border-color: #8000ff;}
  100% {border-color: #ff0080;}
}

/*---------------*/
/*---------------*/
/* The side navigation menu */
div.Menu-Options
{
  margin-top: 416.5px;
  padding: 0;
  width: 300px;
  background-color: #ffffff;
  position: fixed;
  overflow: auto;
}

/* Menu Buttons Content */
div.Menu-Options a
{
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

/* Active Menu Button */
div.Menu-Options a.suggested
{
  background-color: #4CAF50;
  color: #ffffff;
}

/* Inactive Menu Buttons: Hover */
div.Menu-Options a:hover:not(.suggested)
{
  background-color: #555555;
  color: #ffffff;
}
/*---------------*/
/*---------------*/

@media screen
{
  div.Menu-Container
  {
    /* Menu size remains consistent with page size */
    width:  300px;
    height: 621.5px;
    background-color: #ffffff;

    /* Border-Style */
    border-top-style: solid;
    border-bottom-style: solid;
    border-right-style: dashed;
    border-left-style: dashed;

    animation: rainbow-border 2s infinite;
    border-color: #00ffff; /* Required incase browser does not support animated border */
    border-width: 3px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
  }
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style-desktop.css">
    <title>Pacman-Esque: Main Menu</title>
  </head>


  <body>
    <div class=Top-Margin>
      <p>...</p>
    </div>
    <div class=Center-Margin>
      <p>...</p>
    </div>
    <div class=Bottom-Margin>
      <p>...</p>
    </div>


    <!-- Main Menu -->
    <div class=Menu-Container>
      <div class=Animated-Logo>
        <!-- Will contain animated logo -->
      </div>
      <!-- Menu Options -->
      <div class=Menu-Options>
        <a class="suggested" href="#">Start Game</a>
        <a href="#">Highscores</a>
        <a href="#">Settings</a>
        <a href="#">About</a>
      </div>
    </div>
  </body>
</html>

Answer 1

使用

box-sizing: border-box;

这将阻止边框调整元素的大小。

Answer 2

我看你误解了CSS中绝对定位的用法。绝对定位的元素是从元素包含块的边缘计算的（顶部、左侧、底部、右侧）。这里的包含块是元素定位的祖先。更清楚的解释在这里：https://developer.mozilla.org/en-US/docs/Web/CSS/position#Types_of_positioning

<html><head>
    <style>
        body, html
{
  overflow: hidden; /* Prevent browser from displaying scroll-bars */
  background-color: #f1f1f1;

  /* Force the HTML and Body to fill entire window */
  width:  100%;
  height: 100%;
  /* ------------------------------------------------------------------------- */
}

/* Removes margins and padding on all HTML-CSS elements.  */
/* This is so that we don't run into any unecessary whitespace during website design*/
body, html, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td
{
    margin: 0px;
    padding: 0px;
}

body
{
  position: relative;
  z-index: 0;
}

div.Top-Margin
{
  position: relative;
  z-index: 1;

  /* background-color: #f1f1f1; */
  background-color: orange; /* TODO: visibility purposes, only for TESTING */
  height: 25%;
}

div.Center-Margin
{
  position: relative;
  z-index: 1;

  background-color: pink; /* TODO: visibility purposes, only for TESTING */
  height: 50%;
}

div.Bottom-Margin
{
  position: relative;
  z-index: 1;

  /* background-color: #f1f1f1; */
  background-color: yellow; /* TODO: Visibility purposes, only for TESTING */
  width: 100%;
  height: 25%;
}

/* Consistent style between desktop and mobile*/
div.Menu-Container
{
  /*position: absolute;
  top: 25%;
  left: 45%;*/
  margin: 0 auto;
  z-index: 2;
}

@keyframes rainbow-border
{
  0%   {border-color: #ff0000;}
  10%  {border-color: #ff8000;}
  20%  {border-color: #ffff00;}
  30%  {border-color: #80ff00;}
  40%  {border-color: #00ff00;}
  50%  {border-color: #00ff80;}
  60%  {border-color: #00ffff;}
  70%  {border-color: #0080ff;}
  80%  {border-color: #0000ff;}
  90%  {border-color: #8000ff;}
  100% {border-color: #ff0080;}
}

/*---------------*/
/*---------------*/
/* The side navigation menu */
div.Menu-Options
{
  /*margin-top: 416.5px;*/
  padding: 0;
  width: 300px;
  background-color: #ffffff;
  position: fixed;
  overflow: auto;
}

/* Menu Buttons Content */
div.Menu-Options a
{
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

/* Active Menu Button */
div.Menu-Options a.suggested
{
  background-color: #4CAF50;
  color: #ffffff;
}

/* Inactive Menu Buttons: Hover */
div.Menu-Options a:hover:not(.suggested)
{
  background-color: #555555;
  color: #ffffff;
}
/*---------------*/
/*---------------*/

@media screen
{
  div.Menu-Container
  {
    /* Menu size remains consistent with page size */
    width:  300px;
    height: 100%;
    background-color: #ffffff;

    /* Border-Style */
    border-top-style: solid;
    border-bottom-style: solid;
    border-right-style: dashed;
    border-left-style: dashed;

    animation: rainbow-border 2s infinite;
    border-color: #00ffff; /* Required incase browser does not support animated border */
    border-width: 3px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
  }
}
    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script><style type="text/css">.as-console-wrapper { position: fixed; bottom: 0; left: 0; right: 0; max-height: 150px; overflow-y: scroll; overflow-x: hidden; border-top: 1px solid #000; display: none; }
.as-console { background: #e9e9e9; border: 1px solid #ccc; display: table; width: 100%; border-collapse: collapse; }
.as-console-row { display: table-row; font-family: monospace; font-size: 13px; }
.as-console-row:after { display: table-cell; padding: 3px 6px; color: rgba(0,0,0,.35); border: 1px solid #ccc; content: attr(data-date); vertical-align: top; }
.as-console-row + .as-console-row > * { border: 1px solid #ccc; }
.as-console-row-code { width: 100%; white-space: pre-wrap; padding: 3px 5px; display: table-cell; font-family: monospace; font-size: 13px; vertical-align: middle; }
.as-console-error:before { content: 'Error: '; color: #f00; }
.as-console-assert:before { content: 'Assertion failed: '; color: #f00; }
.as-console-info:before { content: 'Info: '; color: #00f; }
.as-console-warning:before { content: 'Warning: '; color: #e90 }
@-webkit-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-moz-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@-ms-keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
@keyframes flash { 0% { background: rgba(255,240,0,.25); } 100% { background: none; } }
.as-console-row-code, .as-console-row:after { -webkit-animation: flash 1s; -moz-animation: flash 1s; -ms-animation: flash 1s; animation: flash 1s; }</style>
    </head>
<body>
    

  
    <link rel="stylesheet" type="text/css" href="style-desktop.css">
    <title>Pacman-Esque: Main Menu</title>
  


  
    <div class="Top-Margin">
      <p>...</p>
    </div>
    <div class="Center-Margin">
      <div class="Menu-Container">
      <div class="Animated-Logo">
        <!-- Will contain animated logo -->
      </div>
      <!-- Menu Options -->
      <div class="Menu-Options">
        <a class="suggested" href="#">Start Game</a>
        <a href="#">Highscores</a>
        <a href="#">Settings</a>
        <a href="#">About</a>
      </div>
    </div><p>...</p>
    </div>
    <div class="Bottom-Margin">
      <p>...</p>
    </div>


    <!-- Main Menu -->
    
  

    <script type="text/javascript">
        
    </script>

<div class="as-console-wrapper"><div class="as-console"></div></div></body></html>

Answer 3

可能是我看到其他答案误解了你的问题。但是如果你希望最小尺寸保持在页面的某个百分比，你可以使用 min-width 属性.

在这种情况下，我添加了

div.Menu-Container{
    position: absolute;
    top: 25%;
    left: 45%;
    z-index: 2;
    min-height: 50%;
    }

当以不同尺寸移动时，它会保持这些边距。

Answer 4

我想通了！

原来我什至不需要任何 Bottom-Margin、Top-Margin HTML div 元素。
我需要做的就是将以下代码添加到我的 Menu-Container:

  /* Aligns menu to center of page */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

感谢您的所有回答！

/* Group:........ That Helvetica Group
 * Members:...... Scott McKay, Kendyl Freeny, William Cook
 * Institution:.. University of Montana
 * Class:........ Advanced Web Design & Programming
 * Date:......... Friday, October 12th, 2018
*/

/*............... Cascading Style Sheet for Menu UI ...............*/


body, html
{
  overflow: hidden; /* Prevent browser from displaying scroll-bars */
  background-color: #f1f1f1;

  /* Force the HTML and Body to fill entire window */
  width:  100%;
  height: 100%;
  /* ------------------------------------------------------------------------- */
}

/* Removes margins and padding on all HTML-CSS elements.*/
/* This is so that we don't run into any unecessary whitespace during website design*/
body, html, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td
{
    margin: 0px;
    padding: 0px;
}

div.Menu-Container
{
  /* Aligns menu to center of page */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  /* Dimensions of the menu-container */
  width:  300px;
  height: 621.5px;
  background-color: #ffffff;

  /* Border-Style */
  border-top-style: solid;
  border-bottom-style: solid;
  border-right-style: dashed;
  border-left-style: dashed;
  border-width: 3px;
  border-color: #00ffff; /* Required incase browser does not support animated border */
  animation:rainbow-border 2s infinite;

  /* Container Shadow */
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
}

/* List of Alternating Colors in Border */
@keyframes rainbow-border
{
  0%   {border-color: #ff0000;}
  10%  {border-color: #ff8000;}
  20%  {border-color: #ffff00;}
  30%  {border-color: #80ff00;}
  40%  {border-color: #00ff00;}
  50%  {border-color: #00ff80;}
  60%  {border-color: #00ffff;}
  70%  {border-color: #0080ff;}
  80%  {border-color: #0000ff;}
  90%  {border-color: #8000ff;}
  100% {border-color: #ff0080;}
}

/* The side navigation menu */
div.Menu-Options
{
  margin-top: 416.5px;
  padding: 0;
  width: 300px;
  background-color: #ffffff;
  position: fixed;
  overflow: auto;
}

/* Sidebar links */
div.Menu-Options a
{
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}

/* Active/current link */
div.Menu-Options a.suggested
{
  background-color: #4CAF50;
  color: #ffffff;
}

/* Links on mouse-over */
div.Menu-Options a:hover:not(.suggested)
{
  background-color: #555555;
  color: #ffffff;
}

<!--
Group:........ That Helvetica Group
Members:...... Scott McKay, Kendyl Freeny, William Cook
Institution:.. University of Montana
Class:........ Advanced Web Design & Programming
Date:......... Friday, October 12th, 2018
-->

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style-desktop.css">
    <title>Pacman-Esque: Main Menu</title>
  </head>


  <body>
    <!-- Main Menu -->
    <div class=Menu-Container>
      <div class=Animated-Logo>
        <!-- Will contain animated logo -->
      </div>
      <!-- Menu Options -->
      <div class=Menu-Options>
        <a class="suggested" href="#">Start Game</a>
        <a href="#">Highscores</a>
        <a href="#">Settings</a>
        <a href="#">About</a>
      </div>
    </div>
  </body>
</html>

如何平均缩小顶部和底部边距但保持中心菜单一致？

How to shrink top and bottom margins equally but keep center menu consistent?

html

css

margins