首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场

HTML边框
EN

Stack Overflow用户
提问于 2013-09-15 15:43:43
回答 1查看 71关注 0票数 0

我是新的HTML和CSS。在我的CSS文件中,我有以下内容:

代码语言:javascript
运行
复制
html {
 border-top: 4px solid #000000;
 border-bottom: 4px solid #000000;
 border-left: 4px solid #000000;
 border-right: 4px solid #000000;
 margin:0;
 padding:0;
}

body {
 background: #ffffff;
 color: #000000;
 line-height: 50px;
 font-size: 20px;
 font-family: serif;
 margin: 0 auto;
 padding: 15px 0;
}

.bot-img {
    position: relative;
    bottom: 0px;
}

当我用Chrome打开页面时,它看起来很好--如下所示:

当我在Firefox中打开页面时,它看起来如下所示:

我怎样才能使两者匹配?

编辑:

下面是HTML的样子:

代码语言:javascript
运行
复制
<html>
    <head>
        {% load staticfiles %}      
        <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}" />
        <title>TheTitle</title>
    </head>

    <body>
        {% load flatpages %}
            {% get_flatpages as flatpages %}
            {% for flatpage in flatpages %}
        <img class="bot-img"  src="{% static 'img/bottomband.jpg' %}"/>
    </body>
</html>

我正在用Django 1.5(和MySQL)作为后端进行开发。

EN

Stack Overflow用户

回答已采纳

发布于 2013-09-15 15:49:12

如果您希望它位于整个html视图中,则应将以下内容添加到CSS中

代码语言:javascript
运行
复制
html {
  height: 100%;
  width: 100%;
}

此外,我建议您重构边框代码如下:

代码语言:javascript
运行
复制
html {
  border: 4px solid #000000;
}

这只会使您不必重复同一行代码四次。

希望这能有所帮助。

票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18814232

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档