HTML CSS：当窗口大小改变时，固定div的边框（框）相互交叉

我希望实现以下设计，其中将具有名为

Header

的类的Header div、具有名为

Footer

的类的Footer div和具有名为

links

的类的左侧div固定到该位置

名为

链接内容

的右侧div是页面中唯一可滚动的

部分


我能够实现固定div，但存在一些问题：

更改
窗口大小
时，
页脚
和
链接
div会相互折叠。我希望他们能够适应这种变化，比如字体大小必须减小才能包装所有单词，等等

我不明白为什么
标题是固定的？
您可以尝试添加产品多次单击“添加更多产品”
按钮，以使“提交”

按钮退出查看端口并显示滚动条。滚动时，您将看到

标题

div是固定的。 因为我没有使用

位置：已修复

但如果我使用它。它改变了我页面的整体结构。

代码段（请在查看结果之前展开代码段）：

功能显示操作（id，磅）{
var ops=document.getElementsByClassName（'option-contents'）；
var op=document.getElementById（id）；
对于（变量i=0；i=0；i--）{
目标菜单。删除（i）；
}
}
功能设置禁用（obj）{
对象设置属性（“禁用”、“禁用”）；
}
功能设置启用（obj）{
对象删除属性（“禁用”）；
}
功能下拉列表（obj）{
所选var=目标值；
var target=obj.nextElementSibling；
变量数量\输入=target.nextElementSibling；
var remove_button=数量_输入.nextElementSibling；
空_选择（目标）；
如果（选定==“”）{
var op=document.createElement（'option'）；
op.text=productsByCategory[选项][0]；
op.value=valuesByCategory[选项][0]；
目标菜单。添加（op）；
设置禁用（目标）；
setdisabled（数量输入）；
setdisabled（移除_按钮）；
}否则{
如果（所选==“1”）{
填写并选择（“A”，目标）；
}否则如果（所选==“2”）{
填充选择（“B”，目标）；
}否则如果（所选==“3”）{
填充选择（“C”，目标）；
}否则{
填充选择（'D'，目标）；
}
设置启用（目标）；
}
}
功能下拉列表2（obj）{
变量数量\输入=obj.nextElementSibling；
var remove_button=数量_输入.nextElementSibling；
var add_button=remove_button.nextElementSibling；
var reset_button=添加_button.nextElementSibling；
var submit_button=reset_button.nextElementSibling；
设置启用（数量输入）；
setenabled（添加按钮）；
setenabled（移除按钮）；
setenabled（复位按钮）；
setenabled（提交按钮）；
}
功能新产品（obj）{
var order=document.getElementById（“order_now”）；
var form=order.firstElementChild；
var last_product=form.lastElementChild；
var clone=last_product.cloneNode（真）；
var reset_按钮=obj.nextElementSibling；
var submit_button=reset_button.nextElementSibling；
setdisabled（clone.getElementsByClassName（“second_select”）[0]）；
setdisabled（clone.getElementsByClassName（“s_btn”）[0]）；
setdisabled（clone.getElementsByClassName（“remove_btn”）[0]）；
setenabled（clone.getElementsByClassName（“add_btn”）[0]）；
对象parentNode.removeChild（重置按钮）；
obj.parentNode.removeChild（提交按钮）；
obj.parentNode.removeChild（obj）；
形式。追加子对象（克隆）；
}
函数重置（）{
var order=document.getElementById（“order_now”）；
var new_product=document.createElement（'div'）；
new_product.className=“产品”；
order.innerHTML=“”；
订单.附件（新产品）；
order.lastElementChild.innerHTML=mega_clone.innerHTML；
}
功能移除产品（obj）{
var order=document.getElementById（“order_now”）；
如果（order.childElementCount==“1”）{
重置（）；
}否则{
order.removeChild（对象父节点）；
}
}

正文{
高度：100vh；
边际：0px；
溢出y：自动；
字体系列：“Roboto”；
}
.标题{
显示：块；
背景色：白色；
宽度：100%；
身高：8%；
字体风格：“机器人”；
字体大小：25px；
边框底部：2倍实心；
边框底色：#中交；
}
.内容{
位置：相对位置；
显示：块；
背景色：白色；
身高：86%；
字体系列：“Roboto”；
z指数：0；
/*最小高度：87%*/
溢出：自动；
/*垫底：6%*/
}
.页脚{
位置：固定；
身高：6%；
宽度：100%；
底部：0；
边框：2倍实心；
边框颜色：蓝色；
框大小：边框框；
}
#清楚的{
明确：两者皆有；
}
.链接{
位置：固定；
显示：块；
弗洛亚
.header {
  display: block;
  background-color: white;
  width: 100%;
  height: 80px; /* Fixed Height */
  font-style: "Roboto";
  font-size: 25px;
  border-bottom: 2px solid;
  border-bottom-color: #cccccc;
}

.content {

  /* make the content fixed so you wont have to with links & link content divs */
  position: fixed;

  display: block;
  background-color: white;

  /* Calculate the height minus footer and header height */
  height: 100%;
  height: -webkit-calc(100% - 160px);
  height: -moz-calc(100% - 160px);
  height: calc(100% - 160px);

  /* and add margin top to not overlap with the header */
  margin-top:60px;

  font-family: 'Roboto';
  z-index: 0;
  overflow: auto;
}

.footer {
  position: fixed;

  /* Give footer a fixed height as well */
  height: 80px;

  width: 100%;
  bottom: 0;
  border: 2px solid;
  border-color: blue;
  box-sizing: border-box;
}

#clear {
  clear: both;
}

.links {
  position: fixed;
  display: block;
  float: left;
  width: 30%;
  line-height: 2;

  /* Set the height to 100% as it is inside the .contents it will take its height */
  height: 100%;

  font-size: 30px;
  border-style: solid;
  box-sizing: border-box;
  border-color: black;
}

.link-contents {
  position: relative;
  display: block;
  float: left;
  left: 30%;
  width: 70%;
  border-style: solid;
  box-sizing: border-box;
  border-color: red;

  /* Set the height to 100% as it is inside the .contents it will take its height */
  height: 100%;
}

.content {
  position: relative;
  background-color: white;
  font-family: 'Roboto';
  height:auto;
  z-index: 0;
  overflow: auto;
  display: flex;
  height: calc(100vh - 14%);
}

.footer {
  position: fixed;
  height: 6%;
  width: 100%;
  bottom: 0;
  border: 2px solid;
  border-color: blue;
  box-sizing: border-box;
}

.links {
  display: block;
  width: 30%;
  line-height: 2;
  height:auto;
  font-size: 30px;
  border-style: solid;
  box-sizing: border-box;
  border-color: black;
  left:0;
  overflow: auto;
}

.link-contents {
  position: relative;
  display: block;
  border-style: solid;
  box-sizing: border-box;
  border-color: red;
  min-height: 100%;
  flex-grow: 1;
  overflow: auto;
}