Alinee el pie de página en la parte inferior de la página con altura fija de la página HTML -- html campo con css camp Relacionados El problema

Align footer at bottom of page with fixed html page height


-2
vote

problema

Español

Estoy creando un certificado de prueba utilizando HTML simple, pero enfrenta un problema.

El pie de página se coloca justo donde termina la altura de la pantalla y no la altura HTML.

ingrese la descripción de la imagen aquí

Siguiendo es HTML:

  html {    height: 1366px;    font-size: 15px;    border: 1px solid black;    margin-left: 20px;    margin-right: 20px;  }    body {    margin: 0;    padding: 0;    height: 1366px;    width: 100%;  }    table,  th,  td {    border: 1px solid black;    border-collapse: collapse;  }    th,  td {    padding: 5px;    text-align: center;  }    table {    border-spacing: 2px;  }    .no-border {    border-left: 1px solid transparent;    text-align: left;    border-bottom: 1px solid transparent;    border-top: 1px solid transparent;    border-right: 1px solid transparent;    padding-bottom: 0px;  }    @media all {    .page-break {      display: none;    }  }    @media print {    @page {      size: auto;      /* auto is the initial value */      margin: 0mm;      /* this affects the margin in the printer settings */    }    .page-break {      display: block;      page-break-before: always;    }  }    .no_left_right {    border-left: 1px solid transparent;    border-right: 1px solid transparent;  }    .no_bottom {    border-bottom: 1px solid transparent;  }    .no_top {    border-top: 1px solid transparent;  }    .custom_width {    width: 5%;  }    .no_borders {    border-left: 1px solid transparent;    border-right: 1px solid transparent;    border-bottom: 1px solid transparent;    border-top: 1px solid transparent;  }  .footer_table{     position: absolute;bottom: 0;     left: 0;     width:100%;     clear:both   }  
         <div style="text-align:center;font-size:18px;"><b>Company name.</b></div>     <div style="text-align:center;font-size:18px;">Location</div>     <hr>     <div style="text-align:center;font-size:18px;"><b>TEST CERTIFICATE</b></div>  <table style="width:50%;margin-top:5px;" align="center">      <tr>          <th>Sr No.</th>          <th>Coulmn</th>          <th>Remark</th>      </tr>      <tr>          <td>1</td>          <td>3</td>          <td>LOW</td>      </tr>      <tr>          <td>2</td>          <td>2</td>          <td>LOW</td>      </tr>      <tr>          <td>3</td>          <td>3</td>          <td>LOW</td>      </tr>  </table>  <table style="" class="no_left_right no_bottom footer_table footer_table">      <tr>          <td style="width:20%;border:1px solid transparent";></td>          <td style="width:20%;border:1px solid transparent";></td>          <td style="width:20%;border:1px solid transparent";></td>      </tr>      <tr>          <th style="width:25%;border:1px solid transparent"></th>          <th style="width:20%;border:1px solid transparent"></th>          <th style="width:45%;border:1px solid transparent"></th>      </tr>      <tr>          <th style="width:25%;border:1px solid transparent"></th>          <th style="width:20%;border:1px solid transparent"></th>          <th style="width:45%;border:1px solid transparent"></th>      </tr>      <tr>          <th style="width:25%;border:1px solid transparent">Tested by</th>          <th style="width:20%;border:1px solid transparent">Seal</th>          <th style="width:45%;border:1px solid transparent">Authorized Signatory</th>      </tr>  </table>  <table style="" class="no_left_right no_bottom footer_2 footer_table">      <tr>          <th rowspan="3" style="width:65%"><b>TESTED ON <img src="" style="width:10%;margin-bottom:-7px;"> XYZ TESTER</b></th>          <td style="width:70%;border-left:1px solid transparent;border-top:1px solid black;border-bottom:1px solid transparent;border-right:1px solid black;text-align:left">              <table style="width:100%;" class="no_borders">                  <tr>                      <td style="width:10%;border:1px solid transparent;text-align:left"><b>Model</b></td>                      <td style="width:20%;border:1px solid transparent;text-align:left"><b>: B 3000-TS</b></td>                  </tr>              </table>          </td>      </tr>      <tr>          <td style="width:70%;border-left:1px solid transparent;border-top:1px solid transparent;border-right:1px solid black;text-align:left">              <table style="width:100%;" class="no_borders">                  <tr>                      <td style="width:11%;border:1px solid transparent;text-align:left"><b>Serial No </b></td>                      <td style="width:20%;border:1px solid transparent;text-align:left"><b>: 11/2017-285</b></td>                  </tr>              </table>          </td>      </tr>  </table>  

Las cosas que me están molestando:

¿Cómo mantener el pie de página en la parte inferior de la página, con la altura fija de HTML por 1366px?

Mi investigación:

1) position ATTRIBUTE CON fixed Sticks Footer a la pantalla inferior, que no es lo que necesito. Encontrado absolute que parecía satisfactorio pero no funcionó, 2 Krishna 67 68 69 Arjun 70 98 63 0 se usó, pero no tuvo éxito.

2) 2 Krishna 67 68 69 Arjun 70 98 63 1111111 , 2 Krishna 67 68 69 Arjun 70 98 63 2 Puede ser útil pero no estoy seguro de cómo usarlo.

Cómo para Stick & Lt; Footer & GT; ¿Elemento en la parte inferior de la página (HTML5 y CSS3)?

Cómo alinear el pie de página (div.) ¿A la parte inferior de la página?

Ninguno de los anteriores funcionó.

¿Alguien me ayudará a arreglar los problemas anteriores?

Tenga en cuenta que el mantenimiento de la altura de la página HTML por 1366px es necesaria / obligatoria en este caso.

Original en ingles

I am creating a test certificate using simple html but facing a problem.

The footer is placed just where the screen height ends and not the html height.

enter image description here

Following is html:

html {    height: 1366px;    font-size: 15px;    border: 1px solid black;    margin-left: 20px;    margin-right: 20px;  }    body {    margin: 0;    padding: 0;    height: 1366px;    width: 100%;  }    table,  th,  td {    border: 1px solid black;    border-collapse: collapse;  }    th,  td {    padding: 5px;    text-align: center;  }    table {    border-spacing: 2px;  }    .no-border {    border-left: 1px solid transparent;    text-align: left;    border-bottom: 1px solid transparent;    border-top: 1px solid transparent;    border-right: 1px solid transparent;    padding-bottom: 0px;  }    @media all {    .page-break {      display: none;    }  }    @media print {    @page {      size: auto;      /* auto is the initial value */      margin: 0mm;      /* this affects the margin in the printer settings */    }    .page-break {      display: block;      page-break-before: always;    }  }    .no_left_right {    border-left: 1px solid transparent;    border-right: 1px solid transparent;  }    .no_bottom {    border-bottom: 1px solid transparent;  }    .no_top {    border-top: 1px solid transparent;  }    .custom_width {    width: 5%;  }    .no_borders {    border-left: 1px solid transparent;    border-right: 1px solid transparent;    border-bottom: 1px solid transparent;    border-top: 1px solid transparent;  }  .footer_table{     position: absolute;bottom: 0;     left: 0;     width:100%;     clear:both   }
       <div style="text-align:center;font-size:18px;"><b>Company name.</b></div>     <div style="text-align:center;font-size:18px;">Location</div>     <hr>     <div style="text-align:center;font-size:18px;"><b>TEST CERTIFICATE</b></div>  <table style="width:50%;margin-top:5px;" align="center">      <tr>          <th>Sr No.</th>          <th>Coulmn</th>          <th>Remark</th>      </tr>      <tr>          <td>1</td>          <td>3</td>          <td>LOW</td>      </tr>      <tr>          <td>2</td>          <td>2</td>          <td>LOW</td>      </tr>      <tr>          <td>3</td>          <td>3</td>          <td>LOW</td>      </tr>  </table>  <table style="" class="no_left_right no_bottom footer_table footer_table">      <tr>          <td style="width:20%;border:1px solid transparent";></td>          <td style="width:20%;border:1px solid transparent";></td>          <td style="width:20%;border:1px solid transparent";></td>      </tr>      <tr>          <th style="width:25%;border:1px solid transparent"></th>          <th style="width:20%;border:1px solid transparent"></th>          <th style="width:45%;border:1px solid transparent"></th>      </tr>      <tr>          <th style="width:25%;border:1px solid transparent"></th>          <th style="width:20%;border:1px solid transparent"></th>          <th style="width:45%;border:1px solid transparent"></th>      </tr>      <tr>          <th style="width:25%;border:1px solid transparent">Tested by</th>          <th style="width:20%;border:1px solid transparent">Seal</th>          <th style="width:45%;border:1px solid transparent">Authorized Signatory</th>      </tr>  </table>  <table style="" class="no_left_right no_bottom footer_2 footer_table">      <tr>          <th rowspan="3" style="width:65%"><b>TESTED ON <img src="" style="width:10%;margin-bottom:-7px;"> XYZ TESTER</b></th>          <td style="width:70%;border-left:1px solid transparent;border-top:1px solid black;border-bottom:1px solid transparent;border-right:1px solid black;text-align:left">              <table style="width:100%;" class="no_borders">                  <tr>                      <td style="width:10%;border:1px solid transparent;text-align:left"><b>Model</b></td>                      <td style="width:20%;border:1px solid transparent;text-align:left"><b>: B 3000-TS</b></td>                  </tr>              </table>          </td>      </tr>      <tr>          <td style="width:70%;border-left:1px solid transparent;border-top:1px solid transparent;border-right:1px solid black;text-align:left">              <table style="width:100%;" class="no_borders">                  <tr>                      <td style="width:11%;border:1px solid transparent;text-align:left"><b>Serial No </b></td>                      <td style="width:20%;border:1px solid transparent;text-align:left"><b>: 11/2017-285</b></td>                  </tr>              </table>          </td>      </tr>  </table>

The things which are bothering me :

How to keep the footer(s) to bottom of page, with fixed height of html by 1366px ?

My research :

1) position attribute with fixed sticks footer to screen bottom which is not what i need. Found absolute which looked satisfying but did not worked, relative was also used but did not succeed.

2) display:table ,flex might be useful but not sure how to use it.

How to stick <footer> element at the bottom of the page (HTML5 and CSS3)?

How to align footer (div) to the bottom of the page?

None of the above worked.

Will somebody help me to fix above issues ?

Please note maintaining height of html page by 1366px is necessary / compulsory in this case.

     
       
       

Lista de respuestas

0
 
vote
vote
La mejor respuesta
 

¡Debes lograr esto usando la posición CSS Absolute! En CSS hagan el siguiente cambio!

  body {   position: relative; } .footer_table {   position: absolute;   bottom: 0;   width: 100%; }   

y en html, deberías tener una etiqueta corporal!

  <body>   <!--- content here --->    <table class="footer_table">     <!--- content here -->   </table> </body>   
 

You should achieve this using css position absolute! In css do the following change!

body {   position: relative; } .footer_table {   position: absolute;   bottom: 0;   width: 100%; } 

and in html, you should have body tag!

<body>   <!--- content here --->    <table class="footer_table">     <!--- content here -->   </table> </body> 
 
 
1
 
vote

Desea mantener el Footer en la parte inferior de HTML con una altura fija de HTML por 1366px . Por favor, compruebe el siguiente ejemplo.

  html {    height: 1366px;    font-size: 15px;    border: 1px solid black;    margin-left: 20px;    margin-right: 20px;    position: relative;  }    .content {    height: 300px;    width: 100%;    border: 1px solid red;  }    .footer {    position: absolute;    bottom: 0;    left: 0;    width: 100%;    border: 1px solid yellow;  }  
  <div class="content">    <p>      Content box Sample Height 300px.    </p>    </div>  <div class="footer">    <h1>      Footer    </h1>  </div>  

un elemento con Posición: Absolute; está colocado relativo al ancestro posicionado más cercano . Sin embargo; Si un elemento absoluto colocado tiene sin ancestros colocados , usa el el cuerpo del documento , y se mueve junto con Página de desplazamiento . Para más detalles , lea diseño CSS - la propiedad de la posición

Revise su código en jsfiddle

 

You want to keep the footer at the bottom of HTML with a fixed height of HTML by 1366px. Please check the example below.

html {    height: 1366px;    font-size: 15px;    border: 1px solid black;    margin-left: 20px;    margin-right: 20px;    position: relative;  }    .content {    height: 300px;    width: 100%;    border: 1px solid red;  }    .footer {    position: absolute;    bottom: 0;    left: 0;    width: 100%;    border: 1px solid yellow;  }
<div class="content">    <p>      Content box Sample Height 300px.    </p>    </div>  <div class="footer">    <h1>      Footer    </h1>  </div>

An element with position: absolute; is positioned relative to the nearest positioned ancestor. However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. For more details Please read CSS Layout - The position Property

Check your code in jsfiddle

 
 
 
 
-1
 
vote

Intente poner bottom:0 o margin-bottom:0 Estilos para el pie de página. Especifique la altura que necesite.

 

Try putting bottom:0 or margin-bottom:0 styles for the footer. specify the height whatever you need.

 
 
 
 

Relacionados problema

142  ¿Cómo detectar cuál de las fuentes definidas se utilizó en una página web?  ( How to detect which one of the defined font was used in a web page ) 
Supongamos que tengo la siguiente regla de CSS en mi página: body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ¿Cómo podría detec...

0  Deshacerse del disco en el artículo de la lista  ( Getting rid of disc in list item ) 
Estoy desarrollando un sitio usando jquery, y jquery ui Tabs. Por alguna razón, mis pestañas (lista desordenada) están mostrando sus balas en todos los navega...

303  ¿Por qué el ancho se colapsó en el elemento secundario del ancho porcentual en un padre absolutamente posicionado en Internet Explorer 7?  ( Why did the width collapse in the percentage width child element in an absolutel ) 
Tengo un double8 que contiene varios niños, uno de los cuales es un 99887776669 relativamente posicionado. Cuando uso un Form0 en el niño Form111111 , ...

8  Desapareciendo bordes de células de mesa CSS en navegadores basados ​​en gecko  ( Disappearing css table cell borders in gecko based browsers ) 
Tengo una construcción de tabla HTML muy específica que parece revelar un error de gecko. Aquí hay una versión destilada del problema. Observe la siguiente ...

0  LazyWeb: necesita Javascript que elimina los elementos de LI basados ​​en la clase visitada de un elemento  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
Tengo esta página que tiene muchos datos que no necesito, ya que ya he hecho clic en él, pero se repite a menudo, así que tengo que buscar visualmente el azul...

0  Imagen de fondo Blurs en Firefox3  ( Background image blurs in firefox3 ) 
Cuando uso la imagen en mi página HTML usando la propiedad de fondo. Los loks están bien en IE, pero se ve borroso en Firefox. Wat podría ser la posible soluc...

76  Cómo romper la palabra después de un carácter especial como guiones (-)  ( How to break word after special character like hyphens ) 
Dado un CSS relativamente simple: div { width: 150px; } <div> 12333-2333-233-23339392-332332323 </div> ¿Cómo lo hago para que la cade...

5  Cómo alinear verticalmente una tabla en CSS  ( How to vertically align a table in css ) 
¿Cómo puedo alinear verticalmente una tabla en el centro de la pantalla con CSS? ...

1  Directrices para diseñar HTML para una fácil personalización CSS  ( Guidelines for designing html for easy css customization ) 
Estoy haciendo un proyecto SAAS, y queremos que cada cliente pueda cargar una página CSS para "su" sitio web. (Aunque en realidad, todos los sitios del client...

4  Cuerda continua que no se envuelve en TD  ( Continuous string not getting wrapped in td ) 
Cuando coloco una larga cadena continua en mi ancho fijo TD, no se está envuelto. La cadena aumenta el ancho de mi mesa. ¿Alguien puede ayudarme con esto? P...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos