0

我正在尝试再次复习我的 HTML 和 CSS，并且我正在尝试制作一个简单的布局。这是我的简单网站的 HTML/CSS。

<!DOCTYPE html> 
<HTML> 
<HEAD>
   <TITLE>My website</TITLE> 
   <META CHARSET="UTF-8">
<style type="text/css">
    * {
        padding: 0px;
        margin: 0px
    }

    html, body {
        margin:0;
        padding:0;
        height:100%;
        border: 0px;
    }

    #TopBar {
        width:100%;
        height:15%; 
        border-bottom:5px solid;
        border-color:#B30000;
    }

    #MidBar {
        background-color:black;
        height:70%;
        width:70%;
        margin-left:auto;
        margin-right:auto;
    }

    #BottomBar {
        position:absolute;
        bottom:0;
        width:100%;
        height:15%; 
        border-top:5px solid;
        border-color:#B30000;
    }

    h1 {
        font-family: sans-serif;
        font-size: 24pt;
    }

    #HEADER {
        text-align:center;
    }

    li {
        display:inline;
    }

    #copyright {
        text-align: center;
    }
</style>
</HEAD>

<BODY>

<DIV ID="TopBar">
<DIV ID="HEADER">
   <HEADER> 
   <H1>My website</H1> 
   <NAV> 
   <UL>
      <LI><A HREF="./about/index.html">About me</A> 
      <LI><A HREF="./contact/index.html">Contact me</A> 
      <LI><A HREF="http://throughbenslens.co.uk/blog">My blog</A> 
      <LI><A HREF="./portfolio/index.html">My portfolio</A> 
   </UL>
   </NAV> 
   </HEADER> 
</DIV>
</DIV>

<DIV ID="MidBar">
<DIV ID="PhotoSlideshow">
test
</DIV>
</DIV>


<DIV ID="BottomBar">
<FOOTER> 
<P ID="copyright">Name here &copy; 
<?PHP DATE("Y") ECHO ?> </P>
</FOOTER> 
</DIV>

</BODY>
</HTML>

考虑到我应用到 div 元素的高度，我希望所有内容都能很好地排列，但是底部 div 似乎高于预期的 15% 并与中间 div 重叠，请参见此处底部的红色边框。 ..div 太高了 我哪里错了？我确定这很简单。

4

4 回答 4

2

您应该了解盒子模型的工作原理......您正在使用元素之外的边框，例如，如果您的元素200px高度为 5px 边框，则总元素大小将为210px;

在此处输入图像描述

因此，将其视为概念，您所拥有的元素总计为100%，并且您也在使用边框，因此超出了视口，这将导致垂直滚动......

此外，您不必使用position: absolute;，您将其设为绝对，只是为了避免滚动，但这是一种错误的方法。绝对元素不在文档流中，如果您没有包裹在position: relative;元素中，将会产生奇怪的结果。

演示

小贴士：

  • 使用小写标签

  • 除非需要，否则避免使用大写 ID

垂直使用 100% 是非常罕见的，设计师通常width: 100%;用于使布局具有响应性。因此，如果您没有任何特定理由选择100%垂直元素，请不要选择它。

解决方案：

不过，如果你想坚持垂直布局跨越 100% 的高度，你应该使用box-sizing: border-box;属性...

在这里做什么box-sizing？好吧，使用上面的属性，它会改变盒子模型的默认行为，所以不是计算元素外部的边框、填充等，而是计算元素内部，因此它会阻止视口滚动。

我将为您提供一个示例，这是我为另一个答案所做的。

Demo 2（更新，忘记标准化 CSS）

上面演示的解释，如果你看一下 CSS，我正在使用

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

这将使每个元素的填充、边框等都被计算在元素内部而不是外部，如果你标记，我正在使用一个边框5px;并且仍然，窗口不会得到滚动条，因为边框被计算在元素内部而不是外部。

于 2013-07-24T16:50:12.693 回答
1

您的代码有很多问题，但是直截了当的答案是边框是盒子模型的一部分，因此是高度计算的一部分。所以你的 div 的高度是高度的 15% + 边框的宽度，因此它是超大的。

请看这个盒子模型的解释：

http://css-tricks.com/the-css-box-model/

于 2013-07-24T16:46:30.283 回答
0

我认为这与您的边框有关（每个边框都是 5px）。由于您的 TopBar、MidBar 和 BottomBar 的百分比高度加起来为 %100，加上额外的边框，您会遇到有效高度大于 %100 的问题，然后，因为您的 BottomBar 具有绝对位置在底部，它不会强制页面滚动，但简单会在 MidBar 和 BotomBar div 之间引起一些重叠。

于 2013-07-24T16:48:04.293 回答
0

从：#BottomBar 中删除“位置：绝对”。这应该够了吧。

于 2013-07-24T16:51:40.640 回答