EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: pacific202 on October 11, 2011, 03:39:45 PM

Title: Panel - fit to bottom of page?
Post by: pacific202 on October 11, 2011, 03:39:45 PM

The attached page was created using the following code:

Code:

    <body>
        <div id="batch-panel" class="easyui-panel" fit="true" style="padding:10px;background:#FFFFFF;">
        Some content
        </div>
    </body>

Why doesn't the fit="true" parameter expand the white panel all the way to the bottom of the page?

Title: Re: Panel - fit to bottom of page?
Post by: stworthy on October 11, 2011, 05:46:00 PM

Set the 'fit' property to true will make the panel fit its parent container size. Normally you need to set the size for your parent container:

Code:

<html style="height:100%;overflow:hidden;">
	<body style="height:100%;overflow:hidden;padding:0;margin:0">
		<div id="batch-panel" class="easyui-panel" fit="true" style="padding:10px;background:#FFFFFF;">
		Some content
		</div>
	</body>
</html>

Title: Re: Panel - fit to bottom of page?
Post by: pacific202 on November 04, 2011, 08:03:12 AM

I've tried this a few different ways and it still doesn't work. Are there any other ways to get this to work with fit/% and not specifying an absolute pixel height?

Title: Re: Panel - fit to bottom of page?
Post by: pacific202 on November 08, 2011, 10:08:41 AM

I finally solved this using the advice in this post:

http://stackoverflow.com/questions/1192783/css-how-to-set-div-height-100-minus-npx

Code:

    <div id="main-panel" class="easyui-panel" style="position:absolute;top:50px;bottom:10px;padding:10px;background:#FFFFFF;">
        Content in div
    </div>

(note: I have a header div that is 40px high and 10px of padding at the top)