responsive

100% width background image with an 'auto' height

[亡魂溺海] 提交于 2019-11-26 18:53:27
问题 I'm currently working on a mobile landing page for a company. It's a really basic layout but below the header there's an image of a product which will always be 100% width (the design shows it always going from edge to edge). Depending on the width of the screen the height of the image will obviously adjust accordingly. I originally did this with an img (with a CSS width of 100%) and it worked great but I've realised that I'd like to use media queries to serve different images based on

How to make a <div> always full screen?

落花浮王杯 提交于 2019-11-26 04:32:10
问题 No matter how its content is like. Is it possible to do this? 回答1: This always works for me: <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> html, body { height: 100%; margin: 0; } #wrapper { min-height: 100%; } </style> <!--[if lte IE 6]> <style type="text/css"> #container { height: 100%; } </style> <![endif]--> </head> <body> <div id="wrapper">some content</div> </body> This is probably the simplest solution to this problem.

How to make a div fill a remaining horizontal space?

我是研究僧i 提交于 2019-11-26 01:19:58
问题 I have 2 divs: one in the left side and one in the right side of my page. The one in the left side has fixed width and I want the one of the right side to fill the remaining space. #search { width: 160px; height: 25px; float: left; background-color: #ffffff; } #navigation { width: 780px; float: left; background-color: #A53030; } <div id=\"search\">Text</div> <div id=\"navigation\">Navigation</div> 回答1: This seems to accomplish what you're going for. #left { float:left; width:180px; background