I'm trying to make a footer with a fixed size, but there's a problem

The reason causes the problem is you just using px to set the width and margin based on your current resolution.

It will looks good and work find if the user has the same resolution with you, but will break the design when the user doesn't have same resolution with you.

For example, your use height: 300px; for .footer, it will work fine for your current resolution (let's say 1600*960), but on the user with different resolution (e.g 1200*800) the height for footer might be too big.

A possible solution is to use % to set the percentage for margin, height and width to make the element scale based on the percentage of screen height and screen width (different resolution)

Or you could use use css media rule to help you style.

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

Check more here.