添加页眉页脚和内容以拆分布局

时间:2016-05-04 12:07:40

标签: html css

我想在这个分割布局中添加页眉和页脚,如下所示: pic1

当我添加此代码时:

def ArithGeo(arr)

  # code goes here
  len = arr.length
  difference = arr[len-1] - arr[len-2]
  ratio = arr[len-1]/arr[len-2]

  k = 0 
  s = k + 1


  while (arr[s] - arr[k]) == difference && s < arr.length
    if s = arr.length - 1
      return "Arithmetic"
    end
    k += 1
  end

  k = 0 

  while arr[s] / arr[k] == ratio && s < arr.length
    if s = arr.length - 1
      return "Geometric"
    end
    k += 1
  end

  return -1 

end

只有在我不点击分割屏幕后才有页眉和页脚: pic2

2 个答案:

答案 0 :(得分:0)

我按照以下内容更改内容

<div id="content">
  <div id="columns-container">
    <div class="column column-a"></div>
    <div class="column column-b"></div>
  </div>
</div>

并添加以下css

#columns-container {
  position:relative;
  height: 100%;
  width: 100%;
}
.column {
  position: absolute;
}
.column-a {
  background-color: green;
  top: 0;
  bottom: 0;
  right: 50%;
  left: 0;
}

.column-b {
  background-color: yellow;
  top: 0;
  bottom: 0;
  right: 0;
  left: 50%;
}

在此网址上提供工作示例

https://jsfiddle.net/vfh2ma1x/

答案 1 :(得分:0)

在内容中我想从鼓室linc to code添加此布局,但是当我添加“&#39;”时。布局是整页,我想将所有内容从鼓室网站限制为内容div,如图片final pic

<body>
<div id="container">
    <div id="header">
        <?php include 's/header.php';?>
    </div>
    <div id="content">
    <?php include 'index.html';?> // link to split site from tympanus
    </div>
    <div id="footer">
        <?php include 's/footer.php';?>
    </div>
</div>
</body>