javascript - HTML 如何阻止元素不超过页脚等

标签 javascript html css chart.js

有人可以帮我处理这个页面吗？我想让它看起来总是接近照片 - 表格和雷达不会越过页脚所以它总是很好。将来我还想添加这个人的照片，并能够为几个人创建这个页面。 我将不胜感激。

var data = {

    labels: [
"5G",
"5W+1H 5WHY",
"Teoria Utrzymania Ruchu",
"Klasyfikacja Maszyn",
"Pomiar OEE OPE",
"KROK 1",
"KROK 2",
"KROK 3",
"SMP",
"5s UR",
"Zarzadzanie Rysunkami",
"Zarzadzanie czesciami",
"Klasyfikacja Maszyn",
"KROK 4",
"KROK 5",
"Utrzymanie Komponentow",
"Analiza MTTR",
"QM PPA",
"High Speed Camera",
"Analizy Awarii",
"KROK 6", 
"KROK 7",
"Real Time Menagement",
"Unmanned Operation",
"FTA PROCES FMEA",
"System Zwrotnego Informowania",
"Reliability Design",
"RCM",
"Zarzadzanie Czesciami Zamiennymi" ],
    datasets: [
{
            label: "hidden",
            fillColor: "rgba(0,0,0,0)",
            strokeColor: "rgba(21,21,21,0)",
            pointColor: "rgba(21,21,21,0)",
            //pointStrokeColor: "#fff",
           // pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(21,21,21,0)",
            data: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5]
        }, 
		{
            label: "My First dataset",
            fillColor: "rgba(252,3,0,1)",
           // strokeColor: "rgba(21,21,21,2)",
           // pointColor: "rgba(21,21,21,0)",
            //pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(21,21,21,2)",
            data: [5, 5, 5, 3, 5, 3, 5, 3, 5, 3, 5, 3, 5, 3, 5, 3, 5, 3, 3, 5, 3, 5, 3, 5, 3, 5, 3, 5, 3]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(255,165,0,1)",
            //strokeColor: "rgba(252,287,15,2)",
            //pointColor: "rgba(252,287,15,2)",
            //pointStrokeColor: "#FE7F00",
           pointHighlightFill: "#FE7F00",
           pointHighlightStroke: "rgba(255,165,0,2)",
            data: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2]
        },
        {
            label: "My third dataset",
            fillColor: "rgba(22,54,92,1)",
            //strokeColor: "rgba(252,3,0,2)",
            //pointColor: "rgba(252,3,0,2)",
            //pointStrokeColor: "#fff",
            pointHighlightFill: "#000000",
            pointHighlightStroke: "rgba(22,54,92,2)",
            data: [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
        },
        {
            label: "min",
            fillColor: "rgba(252,255,255,1)",
            strokeColor: "rgba(252,255,255,1)",
            pointColor: "rgba(252,255,255,1)",
            pointStrokeColor: "#000000",
            pointHighlightFill: "#000000",
            pointHighlightStroke: "rgba(252,255,255,1)",
            data: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        }
    ]
};

var data2 = {

    labels: [
"5G",
"5W+1H 5WHY",
"Teoria Utrzymania Ruchu",
"Klasyfikacja Maszyn",
"Pomiar OEE OPE",
"KROK 1",
"KROK 2",
"KROK 3",
"SMP",
"5s UR",
"Zarzadzanie Rysunkami",
"Zarzadzanie czesciami",
"Klasyfikacja Maszyn",
"KROK 4",
"KROK 5",
"Utrzymanie Komponentow",
"Analiza MTTR",
"QM PPA",
"High Speed Camera",
"Analizy Awarii",
"KROK 6", 
"KROK 7",
"Real Time Menagement",
"Unmanned Operation",
"FTA PROCES FMEA",
"System Zwrotnego Informowania",
"Reliability Design",
"RCM",
"Zarzadzanie Czesciami Zamiennymi" ],
    datasets: [
{
            label: "hidden",
            fillColor: "rgba(0,0,0,0)",
            strokeColor: "rgba(21,21,21,0)",
            pointColor: "rgba(21,21,21,0)",
            //pointStrokeColor: "#fff",
           // pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(21,21,21,0)",
            data: [5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5]
        }, 
    ]
};
html, body {
  height: 100%;
  text-align:center;
  margin : 0px;
}
.header{
	width: 100%;
	height : 10%;
	background-color : rgb(255,192,0);
	text-align: center;
	vertical-align: middle;  
	margin-bottom : 50px;
  font-size : 100%;
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}

#container2{
		min-height:100%;
		position:relative;
		padding:10px;
		padding-bottom:100px;
}
#wcm{
 float: right;
 margin-top : -150px;
 margin-right: -150px;
}
#photo{
	float:left;
}

.footer{
	position:absolute;
	bottom:0;
	width:100%;
	height:60px;
	background-color : rgb(255,192,0);
	-moz-box-shadow:    0px -4px 5px 2px #ccc;
	-webkit-box-shadow: 0px -4px 5px 2px #ccc;
	box-shadow:         0px -4px 5px 2px #ccc;
margin-top : 50px;
}
.formularz{
  float : left;
  width :30%;

}
.radar{
	float:right;
	width: 30%;

	margin-right: 50px;
	position:relative;
}
#legendaS{
border : 1px solid black;
}

#myChart{
	 margin-left: -400px;
 margin-top : -100px; 
 float : none;
 position : absolute;
 z-index : -1;

}
#myChart2{
	margin-left: -400px;
 margin-top : -100px; 
	float : none;
	position : absolute;
	z-index : 0;
}
#obrazek{
	 margin-left: -200px;
 margin-top : 100px; 
 position : absolute;
 z-index : 1;
  float: none;
}
form{
 width:100%;
 height : 70%;
 float: left;
 margin-bottom : 100px;
  box-sizing: border-box;

}
label {
height: 2.2%;
 border: 1px solid black;
 width:40%;
 float:left;
 clear:left;
 font-size : 70%;
 background-color : white;
 text-align : left;
}
input{
 float:left;
 width: 15%;
height: 2.5%;
box-sizing: border-box;
}

textarea{
 height: 5%;
 text-align:center;
 vertical-align: middle;
 resize: none;
}
table{
 width: 97.5%;
 text-align:center;
 padding : 0px;
}
textarea.naglowek{
	width: 40%;
	text-align: middle;
	border : 1px solid black;
	font-size : 100%;
	font-weight:bold;
	padding-top: 5px;
	background-color : white;
	box-sizing: border-box;
}
textarea.czas1{
	width :15%;
	font-weight:bold;
	font-size : 50%;
	padding-top : 2px;
	background-color : rgb(255,0,0);
	box-sizing: border-box;
}
textarea.czas2{
	width :15%;
	font-weight:bold;
	font-size : 45%;
	padding-top : 2px;
	background-color : rgb(255,192,0);
	box-sizing: border-box;
}
textarea.czas3{
	width :15%;
	font-weight:bold;
	font-size : 50%;
	padding-top : 2px;
	color : white;
	background-color : rgb(22,54,125);
	box-sizing: border-box;
}
legend
{
	border : 1px solid black;
 font-size : 75%;
 font-weight : bold;
 box-sizing: border-box;

}

.opis{
	background-color : white;
	 position : relative;
}
.srodek{
	vertical-align:middle;
	 position : relative;
}

.reactive{
	 position : relative;
	background-color : rgb(230,184,183);
}
.preventive{
	 position : relative;
	background-color : rgb(255,255,102);
}
.proactive{
	 position : relative;
	background-color : rgb(153,255,102);
}

.pole{
	 position : relative;
	background-color : #00CCFF;
}

.legenda { list-style: none;
display : inblock;
margin-top : 300px;
float : right;}
.legenda li { margin-right: 3px; }
.legenda span { border: 2px solid #ccc; float: left; width: 10px; height: 10px; margin: 3px; }
/* your colors */
.legenda .superawesome { background-color: rgb(230,184,183);}
.legenda .awesome { background-color: rgb(255,255,102); }
.legenda .kindaawesome { background-color: rgb(153,255,102); }

.fillLegend { list-style: none;
display : inblock ;
/*margin-top : 12.5%;
margin-left : 22.5%;*/
position:absolute;
margin-top : 550px;
float : left;}
.fillLegend li { float : left;margin-right: 10px; }
.fillLegend span { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px; }
/* your colors */
.fillLegend .superawesome { background-color: rgb(252,3,0);}
.fillLegend .awesome { background-color: rgb(255,165,0); }
.fillLegend .kindaawesome { background-color: rgb(22,54,125); }
<head>
    <meta charset="utf-8"/>
    <title>Chart.js demo</title>
   <link rel="stylesheet" href="css.css" type="text/css" />
   	<script src="radar.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/0.2.0/Chart.min.js" type="text/javascript"></script>

</head>

<body>
<div class="header">
<h1> PROFESSIONAL MAINTENANCE </h1>
</div>

<div class="container2">
<div class="formularz">
<form>
<fieldset class="pole">
<fieldset class="opis">
<div class="srodek">
<textarea class="naglowek" >Standardowe Narzędzia</textarea><textarea class="czas1" rows="3">Oczekiwany Poziom Grudzień 2015</textarea><textarea class="czas2" rows="3">Obecny Poziom Wrzesień 2015</textarea><textarea class="czas3" rows="3">Grudzień 2014</textarea> </br>
</div>
</fieldset>
<fieldset class="reactive">
<legend class="reactive">Reactive</legend>

<label>5G</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>5W+1H 5WHY</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>Teoria Utrzymania Ruchu</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>Klasyfikacja Maszyn</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>Pomiar OEE OPE</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>KROK 1</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>KROK 2</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>KROK 3</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>SMP</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
</fieldset>
<fieldset class="preventive">
<legend class="preventive">Preventive</legend>
<label>5s UR</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>Zarzadzanie Rysunkami</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>Zarzadzanie czesciami</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>Klasyfikacja Maszyn</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>KROK 4</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>KROK 5</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>Utrzymanie Komponentow</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>Analiza MTTR</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>QM PPA</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>High Speed Camera</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
</fieldset>
<fieldset class="proactive">
<legend class="proactive">Proactive</legend>
<label>Analizy Awarii</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>KROK 6</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>KROK 7</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>Real Time Menagement</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>Unmanned Operation</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>FTA PROCES FMEA</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>System Zwrotnego Informowania</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>Reliability Design</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>RCM</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
<label>Zarzadzanie Czesciami Zamiennymi</label>
<input type="text" name="level[][future]"><input type="text" name="level[][now]"><input type="text" name="leve[][past]"> </br>
</fieldset>
</fieldset>
</form>
</div>


<div class="radar">
 <!-- <img src="photo.png"  id="photo" width="150" height="150">	-->
 	<canvas id="myChart" width="800" height="800"></canvas>
	<canvas id="myChart2" width="800" height="800"></canvas> 
	<img id="obrazek" src="ramka2.png" width="425" height="422">
	<ul class="legenda">
    <li><span class="superawesome"></span>Reactive</li>
    <li><span class="awesome"></span>Preventive</li>
    <li><span class="kindaawesome"></span>Proactive</li>
</ul>

	<ul class="fillLegend">
    <li><span class="superawesome"></span>Oczekiwany poziom Grudzień 2015</li>
    <li><span class="awesome"></span>Obecny Poziom wrzesień 2015</li>
    <li><span class="kindaawesome"></span> Grudzień 2014</li>
</ul>

</div>

</div>
<script>
var PM = new Chart(document.getElementById("myChart").getContext("2d")).Radar(data,{ 
 pointDot: false,
 pointLabelFontSize : 12,
 angleLineColor : "rgba(32,0,0,0)",
 datasetStrokeWidth : 2,
 scaleLineColor: "rgba(128,128,128,1)",
 responsive : true,

});

var ctx2 = new Chart(document.getElementById("myChart2").getContext("2d")).Radar(data2,{ 
 pointDot: false,
 pointLabelFontSize : 12,
 angleLineColor : "rgba(128,128,128,1)",
 datasetStrokeWidth : 2,
 scaleLineColor: "rgba(128,128,128,1)",
  responsive : true,
});

</script>

  <!-- <img src="wcm.png"  id="wcm" width="200" height="100"> -->


<div class="footer">
</div>
</body>

</html>

enter image description here

最佳答案

您的 .container2 必须包含 float ，您只需添加 .container2{ overflow: hidden;} 即可快速修复，否则我建议使用 clearfix

至于页脚，只需使用 position:relative 而不是 absolute。

我看不到图片，因为它是本 map 片，但我想它现在可以正常工作了。

这是一个有效的 Example .

代码:

.container2 {
    overflow:hidden;
}

.footer{
    position:relative;
    bottom:0;
    width:100%;
    height:60px;
    background-color : rgb(255,192,0);
    -moz-box-shadow:    0px -4px 5px 2px #ccc;
    -webkit-box-shadow: 0px -4px 5px 2px #ccc;
    box-shadow:         0px -4px 5px 2px #ccc;
    margin-top : 50px;
}

关于javascript - HTML 如何阻止元素不超过页脚等，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34656277/

上一篇：html - 将文本(2 行)与缩略图对齐

下一篇：html - 在标签的中心对齐输入字段和复选框

相关文章：

javascript - 使用 JavaScript 设置 cookie 并获取 cookie

php - 用户 session 和显示用户信息

css - 从禁用的单选按钮中删除灰色

javascript - React 中的 PSD.js 错误 fs.readFileSync 不是函数

javascript - 有没有办法通过单击外部来关闭 vue 组件？

javascript - 检测滚动到页面底部事件并采取行动

javascript - href 和 ng-click 在移动设备上的同一个标签中不起作用

asp.net - Z-Index属性不适用于youtube视频

javascript - 是否可以从子窗口(Javascript)关闭父窗口？

javascript - 当 TD 包含特定类时隐藏 TR

©2024 IT工具网  联系我们