Fatal编程技术网

Javascript 垂直线形

javascript html css

Javascript 垂直线形,javascript,html,css,Javascript,Html,Css,请看一下： 我正在尝试垂直对齐内容，使其在较大（1920x1200）和较小（1024x768）分辨率上看起来都不错。我的意思是它没有滚动条。 正如您所见，有大量的可用空间，因此不需要滚动条 我提出的唯一解决方案是使用JS计算内容的高度并设置填充，但我意识到这是最糟糕的解决方案 请告诉我如何做到这一点。如果您的内容高度是固定的，请在内容前面加一个div <div id="distance"></div> <div id="content"> Vertical

请看一下：

我正在尝试垂直对齐内容，使其在较大（1920x1200）和较小（1024x768）分辨率上看起来都不错。我的意思是它没有滚动条。 正如您所见，有大量的可用空间，因此不需要滚动条

我提出的唯一解决方案是使用JS计算内容的高度并设置填充，但我意识到这是最糟糕的解决方案

请告诉我如何做到这一点。

如果您的内容高度是固定的，请在内容前面加一个div

<div id="distance"></div>
<div id="content">
  Vertically centered :D
</div>
​

看看是否是您想要的。简单的解决方案

它的工作原理是强制containing
div
充当
表格单元格
，并使用
垂直对齐：中间
样式。它根本不需要你知道任何元素的高度

小提琴中使用的代码如下

HTML:

其余的只是为了示范。CSS:

div.a {
    border: 1px solid red;
}
div.b {
    border: 1px solid blue;
    height: 200px;
    display:table-cell;
    vertical-align:middle;
}
据我所知，使用纯CSS、无JS和无黑客攻击的唯一方法要求您知道要定位的对象的高度：

<html>
  <head>
    <style type="text/css">
      /* Give your document height */
      body, #content {
        height: 100%;
      }

      /* Give your element height */
      .thing {
        width: 20px;
        height: 300px;
        background: #000;
      }
      /* Position thing */
      #content .thing {
        position: absolute;
        top: 50%;
        margin-top: -150px; /* half the height of the thing */
      }
    </style>
  </head>
  <body>
    <div id="content">
       <div class="thing"></div>
    </div>
  </body>
</html>


/*给出文档的高度*/
正文#内容{
身高：100%；
}
/*给出你的元素高度*/
.事情{
宽度：20px；
高度：300px；
背景：#000；
}
/*位置事物*/
#内容，东西{
位置：绝对位置；
最高：50%；
边缘顶部：-150px；/*物体高度的一半*/
}
编辑：更新了项目的高度，容器id。仍然可以正常工作。

有一种方法可以在不使用javascript和不知道内容高度的情况下实现这一点，但纯粹主义者不会喜欢它。再说一次，有时它不被时尚人士认可也没关系。有时候，你所需要的只是完成工作，因为你的老板希望你这样做

解决方案是：使用一个表（告诉你纯粹主义者不会喜欢它）。不要以老派的方式布局，不要滥用HTML为表指定了许多功能这一事实

表格单元格是唯一具有垂直对齐属性的HTML元素，它实现了大多数人所期望的功能。只需为表格提供100%的宽度和高度（这样就可以随窗口大小而扩展），并使用单元格对齐来定位所需的内容

我只用过一次这个把戏，但它仍然让我感觉脏兮兮的，但当你真的需要它的时候，它比其他任何东西都管用

*注意：我自己是一个纯粹主义者，但我明白有时候男人必须做男人必须做的事。

为了让这项工作起作用，我仍然需要用JS计算深灰色空间的高度，并将内容设置为该高度。然后我必须将#content内部元素包装到某个div中，并将您的技术应用到该div中。同样，它使用JS:）不是真的。你可以只使用灰色背景，将所有这些都包装在一个100%高的div中。在上述div之后，您放置页脚并给它一个负的上边距，以便将其移回视图。你只需要知道你的页脚有多高，你的主要内容有多高（例如，手写的内容+横线之间的内容）。我已经更新了html和css。请看一看。我将#content-inner元素包装成一个“div.inner”，并将#content的高度设置为100%。什么也没发生。很明显，我不明白你的意思，你能在我展示的网站上应用这个例子吗？我试图定位的东西的高度是300px，但为了工作，我需要在高度上扩展容器（不是“主体”，而是内容）。在我看来，这必须用JS来完成。你的意见无关紧要。我的意见无关紧要。重要的是“代码有效吗？”复制代码，将其输入任何编辑器，然后用自己的眼睛查看它是否有效。我知道它有效，但这不是我的情况。在我的例子中，#内容不会扩展到整个灰色区域，这就是问题所在。 
display: table-cell 
vertical-align: middle

div.a {
    border: 1px solid red;
}
div.b {
    border: 1px solid blue;
    height: 200px;
    display:table-cell;
    vertical-align:middle;
}

<html>
  <head>
    <style type="text/css">
      /* Give your document height */
      body, #content {
        height: 100%;
      }

      /* Give your element height */
      .thing {
        width: 20px;
        height: 300px;
        background: #000;
      }
      /* Position thing */
      #content .thing {
        position: absolute;
        top: 50%;
        margin-top: -150px; /* half the height of the thing */
      }
    </style>
  </head>
  <body>
    <div id="content">
       <div class="thing"></div>
    </div>
  </body>
</html>