css - 当窗口调整大小时，里面有表格的 div 正在外面

Question

我正在研究“calculadora de creditos”-credits calculator-。

我用流畅的布局做到了这一点。我在互联网上搜索有关我的问题的信息，但找不到任何信息。

代码 CSS:

/* RESET CSS*/

*{
margin:0;
border:0;
padding:0;

}



/* Diseño...*/

article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
display: block;
}

html{height:100%;width:100%;}   

body  {
margin:3%;
text-align:center;
font: Arial, sans-serif;
color:white;
background-image: url(negro3.jpg);
background-repeat:no-repeat;
background-position:center center;
background-attachment:fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size:cover;
background-size: cover; 

}


#principal {
position:relative;
opacity:0.9;
width:50% !important;
min-width:500px;
min-height:100%;
max-width:1500px;
margin:0 auto 0 auto;
background-color: #360000;
border:1px solid transparent;
padding:5%;
}




#footer{
position:absolute;
bottom:0;
left:0;
width: 100%;
background-color:gray;
height:2%;
}



.header {
position:absolute;
left:0;
top:0;
width:100%;
height:3%;
background-color:gray;
}


.form1{
width:70%;
height:30%;
margin:15% auto 0 auto;
}

#formulario1 input{
padding:.3em;
}







.semestre1 {
display: table;
margin:0 auto 10% auto;
padding:0px;
box-shadow: 3px 4px 6px #888888;


-moz-border-radius-bottomleft:7px;
-webkit-border-bottom-left-radius:7px;
border-bottom-left-radius:7px;

-moz-border-radius-bottomright:7px;
-webkit-border-bottom-right-radius:7px;
border-bottom-right-radius:7px;

-moz-border-radius-topright:7px;
-webkit-border-top-right-radius:7px;
border-top-right-radius:7px;

-moz-border-radius-topleft:7px;
-webkit-border-top-left-radius:7px;
border-top-left-radius:7px;

}.semestre1 table{
    border-collapse: collapse;
    border-spacing: 0;
margin:0px;padding:0px;
}.semestre1 tr:last-child td:last-child {
-moz-border-radius-bottomright:7px;
-webkit-border-bottom-right-radius:7px;
border-bottom-right-radius:7px;
}
.semestre1 table tr:first-child td:first-child {
-moz-border-radius-topleft:7px;
-webkit-border-top-left-radius:7px;
border-top-left-radius:7px;
}
.semestre1 table tr:first-child td:last-child {
-moz-border-radius-topright:7px;
-webkit-border-top-right-radius:7px;
border-top-right-radius:7px;
}.semestre1 tr:last-child td:first-child{
-moz-border-radius-bottomleft:7px;
-webkit-border-bottom-left-radius:7px;
border-bottom-left-radius:7px;
}.semestre1 tr:hover td{
background-color:#994e4e;


}
.semestre1 td{
vertical-align:middle;

background-color:#994e4e;

border:1px solid #c4baba;
border-width:0px 1px 1px 0px;
text-align:center;
padding:3px;
font-size:11px;
font-family:Arial;
font-weight:bold;
color:#ffffff;
}.semestre1 tr:last-child td{
border-width:0px 1px 0px 0px;
}.semestre1 tr td:last-child{
border-width:0px 0px 1px 0px;
}.semestre1 tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.semestre1 tr:first-child td{
background:-o-linear-gradient(bottom, #4c0b0b 5%, #4c0b0b 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4c0b0b), color-stop(1, #4c0b0b) );
background:-moz-linear-gradient( center top, #4c0b0b 5%, #4c0b0b 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c0b0b", endColorstr="#4c0b0b");  background: -o-linear-gradient(top,#4c0b0b,4c0b0b);

background-color:#4c0b0b;
border:0px solid #c4baba;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:13px;
font-family:Arial;
font-weight:bold;
color:#ffffff;
}
.semestre1 tr:first-child:hover td{
background:-o-linear-gradient(bottom, #4c0b0b 5%, #4c0b0b 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4c0b0b), color-stop(1, #4c0b0b) );
background:-moz-linear-gradient( center top, #4c0b0b 5%, #4c0b0b 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c0b0b", endColorstr="#4c0b0b");  background: -o-linear-gradient(top,#4c0b0b,4c0b0b);

background-color:#4c0b0b;
}
.semestre1 tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.semestre1 tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}


.semestre2 {


display: table;
margin:0 auto 20% auto;
padding:0px;
box-shadow: 3px 4px 6px #888888;


-moz-border-radius-bottomleft:7px;
-webkit-border-bottom-left-radius:7px;
border-bottom-left-radius:7px;

-moz-border-radius-bottomright:7px;
-webkit-border-bottom-right-radius:7px;
border-bottom-right-radius:7px;

-moz-border-radius-topright:7px;
-webkit-border-top-right-radius:7px;
border-top-right-radius:7px;

-moz-border-radius-topleft:7px;
-webkit-border-top-left-radius:7px;
border-top-left-radius:7px;
}.semestre2 table{
border-collapse: collapse;
border-spacing: 0;
margin:0px;padding:0px;
}.semestre2 tr:last-child td:last-child {
-moz-border-radius-bottomright:7px;
-webkit-border-bottom-right-radius:7px;
border-bottom-right-radius:7px;
}
.semestre2 table tr:first-child td:first-child {
-moz-border-radius-topleft:7px;
-webkit-border-top-left-radius:7px;
border-top-left-radius:7px;
}
.semestre2 table tr:first-child td:last-child {
-moz-border-radius-topright:7px;
-webkit-border-top-right-radius:7px;
border-top-right-radius:7px;
}.semestre2 tr:last-child td:first-child{
-moz-border-radius-bottomleft:7px;
-webkit-border-bottom-left-radius:7px;
border-bottom-left-radius:7px;
}.semestre2 tr:hover td{
background-color:#994e4e;


}
.semestre2 td{
vertical-align:middle;

background-color:#994e4e;

border:1px solid #c4baba;
border-width:0px 1px 1px 0px;
text-align:center;
padding:3px;
font-size:11px;
font-family:Arial;
font-weight:bold;
color:#ffffff;
}.semestre2 tr:last-child td{
border-width:0px 1px 0px 0px;
}.semestre2 tr td:last-child{
border-width:0px 0px 1px 0px;
}.semestre2 tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.semestre2 tr:first-child td{
background:-o-linear-gradient(bottom, #4c0b0b 5%, #4c0b0b 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4c0b0b), color-stop(1, #4c0b0b) );
background:-moz-linear-gradient( center top, #4c0b0b 5%, #4c0b0b 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c0b0b", endColorstr="#4c0b0b");  background: -o-linear-gradient(top,#4c0b0b,4c0b0b);

background-color:#4c0b0b;
border:0px solid #c4baba;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:13px;
font-family:Arial;
font-weight:bold;
color:#ffffff;
}
.semestre2 tr:first-child:hover td{
background:-o-linear-gradient(bottom, #4c0b0b 5%, #4c0b0b 100%);    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #4c0b0b), color-stop(1, #4c0b0b) );
background:-moz-linear-gradient( center top, #4c0b0b 5%, #4c0b0b 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#4c0b0b", endColorstr="#4c0b0b");  background: -o-linear-gradient(top,#4c0b0b,4c0b0b);

background-color:#4c0b0b;
}
.semestre2 tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.semestre2 tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}


.creditos input{
text-align:center;
color:white;
background-color:#994e4e;
border:1px solid gray;
}

.creditos input:hover{
background-color:rgb(0%,25%,60%);
color:white;
}

.creditos input:focus{
background-color:rgb(0%,25%,60%);
color:white;
}



#materia{
text-align:left;
padding:4px;
}

.nivel{
text-align:center;
font-size:16px;
margin-bottom:2%;
font-family:Arial;
font-weight:bold;
color:gold;
}

代码 HTML:

 <!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="description" content="Calculadora de Creditos del CECyT No. 1 Gonzalo Vazquez Vela del IPN">
<meta name="keywords" content="calculadora de creditos,CECyT 1,Sistema Escolarizado,Gonzalo Vazquez Vela">
<title>CALCULADORA DE CREDITOS - CECyT No. 1 "GONZALO VAZQUEZ VELA" DEL IPN</title>
<link rel="stylesheet" media="screen" href="carreras.css">
<link rel="stylesheet" media="handheld" href="">
<link rel="stylesheet" media="print" href="">
<noscript>
Este navegador no soporta javascript ,actualiza tu navegador.
</noscript>
</head>

<body>
<div id="principal">
<div class="header">
<h1>SISTEMAS DIGITALES</h1>
</div>

<div class="form1">
<form id="formulario1" onsubmit="return submitForm();" method="post" >
Nombre: <input type="text" name="nombre"  autocomplete="off"/><br /> <br>
Boleta: <input type="text" name="boleta" autocomplete="off"/><br /> 
<br /><br /> 
<div class="form_result"> </div>
</form>
</div>
<br/><br/>




<!-- PRIMER SEMESTRE -->
<div class="nivel">NIVEL I</div>        
<form class="creditos" name="digitales" id="digitales" method="post" >
<div class="semestre1" >
<table >
<tr>
<td>
UNIDADES DE APRENDIZAJE
</td>
<td >
VALOR EN CRÉDITOS
</td>
<td>
CALIFICACIÓN 
</td>
<td>
ACREDITACIÓN
</td>
<td>
CARGA ACADÉMICA
</td>
</tr>
<tr>
<td nowrap id="materia">
ALGEBRA
</td>
<td>
5.62
</td>
<td>
<input type="text" id="1" name="1" size="2px">

</td>
<td>
Row 1
</td>
<td>
Row 1
</td>
</tr>
<tr>
<td nowrap id="materia">
COMPUTACION BASICA I
</td>
<td>
4.5
</td>
<td>
<input type="text" id="2" name="2" size="2px">
</td>
<td >
Row 2
</td>
<td >
Row 2
</td>
</tr>
<tr>
<td nowrap id="materia">
EXPRESION ORAL Y ESCRITA I
</td>
<td>
4.5
</td>
<td>
<input type="text" id="3" name="3" size="2px">
</td>
<td >
Row 3
</td>
<td>
Row 3
</td>

</tr>
<tr>
<td nowrap id="materia">
INGLES I
</td>
<td>
5.62
</td>
<td>
<input type="text" id="4" name="4" size="2px">
</td>
<td >
Row 4
</td>
<td>
Row 4
</td>

</tr>
<tr>
<td nowrap id="materia">
FILOSOFIA I
</td>
<td>
3.37
</td>
<td>
<input type="text" id="5" name="5" size="2px">
</td>
<td >
Row 5
</td>
<td>
Row 5
</td>

</tr>
<tr>
<td nowrap id="materia">
DESARROLLO PERSONAL
</td>
<td>
4.5
</td>
<td>
<input type="text" id="6" name="6" size="2px">
</td>
<td >
Row 6
</td>
<td>
Row 6
</td>

</tr>
<tr>
<td nowrap id="materia">
ORIENTACION JUVENIL Y PROFESIONAL I
</td>
<td>
0.0
</td>
<td>
<input type="text" id="7" name="7" size="2px">
</td>
<td >
Row 7
</td>
<td>
Row 7
</td>
</tr>
<tr>
<td nowrap id="materia">
DESARROLLO DE HAB. DEL PENSAMIENTO
</td>
<td>
3.37
</td>
<td>
<input type="text" id="8" name="8" size="2px">
</td>
<td >
Row 8
</td>
<td>
Row 8
</td>

</tr>
<tr>
<td nowrap id="materia">
HISTORIA DE MEXICO CONTEMPORANEO I
</td>
<td>
3.37
</td>
<td>
<input type="text" id="9" name="9" size="2px">
</td>
<td >
Row 9
</td>
<td>
Row 9
</td>
</tr>

</table>
</div>



..........


<!-- SEXTO SEMESTRE -->         
<div class="nivel">NIVEL VI</div>                   
<div class="semestre2" >
<table >
<tr>
<td>
UNIDADES DE APRENDIZAJE
</td>
<td >
VALOR EN CRÉDITOS
</td>
<td>
CALIFICACIÓN 
</td>
<td>
ACREDITACIÓN
</td>
<td>
CARGA ACADÉMICA
</td>
</tr>
<tr>
<td nowrap id="materia">
PROBABILIDAD Y ESTADISTICA
</td>
<td>
5.62
</td>
<td>
<input type="text" id="47" name="47" size="2px">  
</td>
<td>
Row 1
</td>
<td>
Row 1
</td>

</tr>
<tr>
<td nowrap id="materia">
FISICA IV
</td>
<td>
5.62
</td>
<td>
<input type="text" id="48" name="48" size="2px">  
</td>
<td >
Row 2
</td>
<td >
Row 2
</td>

</tr>
<tr>
<td nowrap id="materia">
QUIMICA IV
</td>
<td>
4.5
</td>
<td>
<input type="text" id="49" name="49" size="2px">  
</td>
<td >
Row 3
</td>
<td>
Row 3
</td>

</tr>
<tr>
<td nowrap id="materia">
INGLES VI
</td>
<td>
6.75
</td>
<td>
<input type="text" id="50" name="50" size="2px">  
</td>
<td >
Row 4
</td>
<td>
Row 4
</td>

</tr>
<tr>
<td nowrap id="materia">
ORIENTACION JUVENIL Y PROFESIONAL IV
</td>
<td>
0.0
</td>
<td>
<input type="text" id="51" name="51" size="2px">  
</td>
<td >
Row 5
</td>
<td>
Row 5
</td>

</tr>
<tr>
<td nowrap id="materia">
MANTENIMIENTO DE EQUIPO DE CÓMPUTO
</td>
<td>
4.5
</td>
<td>
<input type="text" id="52" name="52" size="2px">  
</td>
<td >
Row 6
</td>
<td>
Row 6
</td>

</tr>
<tr>
<td nowrap id="materia">
MICROELECTRÓNICA PROGRAMABLE
</td>
<td>
4.5
</td>
<td>
<input type="text" id="53" name="53" size="2px">  
</td>
<td >
Row 7
</td>
<td>
Row 7
</td>

</tr>
<tr>
<td nowrap id="materia">
REDES DIGITALES
</td>
<td>
4.5
</td>
<td>
<input type="text" id="54" name="54" size="2px">  
</td>
<td >
Row 8
</td>
<td>
Row 8
</td>

</tr>
<tr>
<td nowrap id="materia">
OPTATIVA V
</td>
<td>
5.62
</td>   
<td>
<input type="text" id="55" name="55" size="2px">  
</td>
<td >
Row 8
</td>
<td>
Row 9
</td>

</tr>

</table>
</div>
</form>

<div id="footer">©2014 Robles Sosa Eduardo Ignacio</div>

</div>
</body>

</html>

Answer 1

您将 #principal div 的宽度限制为 50%，同时您提供了最小宽度和最大宽度。删除此属性。

#principal{
    width:50% !important ; 
}

检查这个 http://jsfiddle.net/haGL5/