时间戳

首页 > 解决方案 > 如何在 HTML/CSS 中创建一个简单的全屏框？

html - 如何在 HTML/CSS 中创建一个简单的全屏框？

问题描述

我想改写一下：

我想创建一个没有悬停的白色背景标题（目前它是白色的），一个不跨越屏幕高度的全宽黄色框，当我添加它时可能会扩展？里面有一个白色的小文本框，右边有一张图片。

到目前为止，我有：

    <html>
<head>
        <link rel="stylesheet" href="style.css" />


</head>
<body>
        <div class="header">

                <a class="logo" target="_blank"><img src=".\images\logo.png" border="0" alt="logo" width="90"></a>
                <div class="header-left">
                  <a class="active" href="index.html">Home</a>
                  <a href="wall.html">Wall</a>
                  <a href="shop.html">Shop</a>
                  <a href="blog.html">Blog</a>
                  <a href="faq.html">FAQ</a>
            <div class="header-right">
                  <a class="active" href="http://instagram.com/woolybox" target="_blank"><img src=".\images\instagram.png" border="0" alt="instagram"img width="20" height="20"></a>
                  <a href="http://twitter.com/wooly_box" target="_blank"><img src=".\images\twitter.png" border="0" alt="twitter" img width="20" height="20"></a>

                </div>
                </div>
    <table><tr><td>


    Hello
        </td></tr></table>


</body>

CSS：

    html, body { 
  height: 100%; 
  min-height: 100%; 

  border-width: 0; 
  border-style: solid;
  border: #fff;
}

  table { 
    height: 100%; 
    width: 100%; 
    background-color: #f4d442;
  }

td { 
  height: 100%; 
  width: 100%; 
  vertical-align: middle; 
  text-align: left;}

.header {
    overflow: hidden;
    background-color: #ffffff;
    padding: 20px 30px;
  }


  .header a {
    float: left;
    color: grey;
    text-align: center;
    background-color: #fff;
    padding-top: 16px;
    padding: 24px;
    text-decoration: none;
    font-family: 'Courier New', Courier, monospace;
    font-size: 18px; 
    line-height: 25px;
    border-radius: 4px;
  }


  .header a.logo {
    font-size: 25px;
    padding-top: 4px;
    font-weight: bold;
  }


  .header a:hover {
    background-color: #fff;
    color: black;
  }


  .header a.active {
    background-color: #fff;
    color: #f4d442;
  }


  .header-right {
    float: right;
  }

  @media screen and (max-width: 500px) {
    .header a {
      float: none;
      background-color: #fff;
      display: block;
      text-align: left;
    }

  .header-right {
      float: none;
    }
  }

我的结果最终变成了一个像这样的细黄色框：

问题

我正在关注我使用 Adob​​e XD 和 MDL 组件制作的这个模型。同样，我非常缺乏实践，并试图理解很多新事物。

小样

标签： htmlcss

解决方案

这有帮助吗？将身体高度等设置为 100%。然后使用相对 %s 的内部高度。

<html>
<head>
<style>
html, body { height: 100%; min-height: 100%; border-width: 5; border-style: solid; }
table { height: 100%; width: 100%; }
td { height: 100%; width: 100%; vertical-align: middle; text-align: center;}
</style>
</head>
<body>
<table><tr><td>
Hello
</td></tr></table>
</body>
</html>

推荐阅读