无法弄清楚如何在div末尾删除不必要的空间

Question

Here's the template I'm using: http://tympanus.net/Blueprints/ElasticContentSlider/ Source here: http://tympanus.net/codrops/2013/02/26/elastic-content-slider/

Closest I've gotten is changing the height of '.main' but it changes the size of the main content box.

Answer 1

尝试放置html, body, .container, .main {overflow:hidden;}这是最适合您的解决方案...

Answer 2

to remove the extra space change your css to something like this:

body .container { height:72%;}
.cbp-contentslider { height:100%;}

To simplify the layout even further I would suggest:

 body .container { height:66%;}
.cbp-contentslider { height:100%;}
.main, .container > header { padding:0; width:82%; } // Don't need such padding for .main just use width/margin

Answer 3

this is what you need

.cbp-contentslider li > div {
position: absolute;
top: 9em;
bottom: 3.313em;
width: 100%;
left: 0;
padding: 0 1em;
overflow-x: hidden;
overflow-y: hidden;  //changed this from `auto` to `hidden`
}