div css布局网页如何实现网页自动适应屏幕高度和宽度

Question

如题所述

Answer 1

网页的宽度可以通过百分比设定，它会根据屏幕宽度的百分比来确定大小。设置宽度百分比时，首先需要将body的宽度设为100%，这是百分比宽度的参考对象。例如，如果希望将容器的宽度设置为屏幕宽度的50%，则body的宽度应设为100%。

实现一屏分为两栏显示，可以使用两个DIV。假设两个DIV的宽度均为50%，则它们加起来正好是100%，能够填满整个屏幕。如果想要在两个DIV之间留有间距，可以将每个DIV的宽度调整为48%，以留出一定的空间。然后，将左侧的DIV设置为左浮动，右侧的DIV设置为右浮动，这样就可以实现两栏并排显示的效果。

对于高度，可以采用固定像素单位进行设置，例如将某个DIV的高度设为50px。高度和宽度可以同时使用固定像素和百分比单位，但需要确保body的高度和宽度都设为100%，以确保百分比单位的正确显示。

总之，通过合理设置body和容器的宽度与高度，可以灵活调整网页布局，实现自动适应屏幕宽度和高度的目的。