html 各种布局整理 -- 1

最新推荐文章于 2023-04-11 16:58:34 发布

笑望灬星辰

最新推荐文章于 2023-04-11 16:58:34 发布

阅读量958

点赞数

本文链接：https://blog.csdn.net/hu1628299958/article/details/107218991

版权

html 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

废话不多说直接上代码

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>css真正的精髓</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      color:#fff;
    }

    #container {
      min-width: 1260px;
      width:1260px;
      height:100vh;
      margin: 0 auto;
    }
    #header {
      background: rgb(128, 226, 149);
      height:70px;
    }
    #content {
      /* 内容区 利用calc计算属性*/
      min-height: calc(100vh - 70px - 100px); 
      /* min-height: 1000px; */
      background: rgb(209, 149, 149);
    }
    #footer {
      height: 100px;
      background: #333;
    }
    .white{
      color: #fff;
    }
  </style>
</head>

<body>
  <div id="container">
    <!-- <div id="header">网页头部</div>
    <div id="content" class="white">网页内容</div>
    <div id="footer" class="white">网页底部</div> -->
    <!-- h5 语义化 -->
    <header id="header">网页头部</header>
    <main id="content">网页内容</main>
    <footer id="footer">网页底部</footer>
  </div>
</body>
</html>

效果

在这里插入图片描述
一个最小宽度配合居中显示的这么一个布局方式

然后可以弃用浏览器的滚动条给网页主题内容 content 加个滚动条就可以了这种布局方式几乎适配主流显示器

用到了计算属性 calc()

笑望灬星辰

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html 各种布局整理 -- 1

废话不多说直接上代码<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css真正的精髓</title> <style> *{ margin: 0;
复制链接

扫一扫