<!--国字布局：这种布局是普通也是常见的，一些大型网站经常使用这种类型。它的特点就是规范，内容主次由上到下，网页上面是标题条幅、导航栏，下面就是网站相关内容信息等-->
<template>
  <div class="layout-nation" :class="border?'border':''">
    <div class="header" :style="{height:headerHeight}"></div>
    <div class="content" :style="{height:`calc(100% - ${headerHeight})`}"></div>
  </div>
</template>

<script>
export default {
  name: "layoutNation",
  props: {
    headerHeight: {
      type: String,
      default: () => '60px'
    },
    border:{
      type:Boolean,
      default:()=>false
    }
  }
}
</script>

<style scoped lang="scss">
.layout-nation {
  width: 100%;
  height: 100%;
}
.border{
  .header{
    border:1px dashed #0d95e8;
  }
  .content{
    border:1px dashed #0d95e8;
    border-top:none;
  }
}

.header {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.content {
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
</style>
