How can I set a height of document [duplicate]
Tags: javascript,html,css
Problem :
Possible Duplicate:
How to create a custom scrollbar on a div
I'm having the following body
<div id="app-container">
<div id="canvas-container">
<div id="canvas"></div>
</div>
</div>
In CSS I have:
#canvas {
position: absolute;
background-color: transparent;
width: 100%;
height: 100%;
}
#app-container {
height: auto !important;
min-height: 100%;
}
#canvas-container {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
after that I'm adding divs (with jquery.appendTo and jquery.offset) to <div id="canvas"></div>
with
display: inline-block;
position: absolute;
in CSS. So adding such a div cannot affect document size. If I add many divs some of them can be located below the edge of screen. How can I add a scrollbox, so that I can see all of divs?
Solution :
The property overflow: auto
and height: (required height)
inside the #canvas
should make all the divs inside that visible.
I have used this few times in my application. Hope I didn miss anything thats very obvious.
CSS Howto..
The lightweight method is to use CSS, and use the property background-image of the div: jsFiddle <div id="featured-box-right"></div> CSS: #featured-box-right { width: 300px; height: 150px; background-image: url('http://i.stack.imgur.com/OywDf.png'); } #featured-box-right:hover {...
Its better to use all the css quantities in percentage. For example, when providing a width for table, provide it as width: 10%; instead of giving it as width: 100px;....
You can use position: relative on the parent element and then put position: absolute on the H1 tag: .headwrap { margin: 0; max-width: 1500px; width: 100%; height: 100%; position: relative;...
for a transition you need 2 values (start/end) that can be divided by steps, numbers. none and block can't and can only switch from one to another, you could eventually...
image_tag(class_door(student_class), onMouseover: "this.src='/assets/open_door.png';", onMouseout: "this.src='/assets/closed_door.png'" ) I have the above code is working for me , note that class_door(student_class) is a helper in my application the mouse over method is...
I assume that you cannot manually alter the html and you want to add a specific class on a click event.I dont think there is a css method to add...
You need to wrap the link and the div into the same container,then bind the event there. <div class="wrapper"> <a href="#" class="show_hide">Show/hide</a><br /> <div class="slidingDiv" style="width:103px;height:60px;"> <img alt="" height="80" src="images/dropdown.png"...
This answer was written on the assumption that JavaScript was being used. While this answer is still useful (under that assumption) the language has since been specified as C#. So...
Borders are placed around an element's dimensions, in your case, the body tag covers the entire window. If you wanted them to be closer you can add borders to another...
You can achieve with the combination of white-space & display:inline-block like this: HTML: <div class="parent"> <div class="child">1</div> <div class="child">2</div> <div class="child">2</div> </div> CSS: .child{ display:inline-block; *display:inline; /* for IE7*/ *zoom:1;/*...
makes perfect sense (jk). It's because the child div is inheriting the parent's padding.
You can achive this by removing float and making your div like this. div { background-color: #ff0; padding:2px; font-size:12px; word-wrap: break-word;//this one too. incase the word becomes too long. display:...
use display: inline-block for .NavItem for .NavBar - text-align: center .NavBar { list-style-type: none; margin: 0; padding: 0; font-size: 0; text-align: center; } .NavItem { display: inline-block; vertical-align: top; font-size:...
You can get as close as possible with this, given you can't change the markup: table tr:last td { border-bottom: solid 1px blue; } If you're generating multiple tables you...
Change: .tabContent div { To: .tabContent > div { Demo Fiddle At present you are setting all div elements within .tabContent to position:absolute etc, you only want to do this...
You can change the on slide function to do that (added the 2 bottom lines): // When the carousel slides, auto update the text $('#myCarousel').on('slid', function (e) { var id...
Something a bit different with :before and :after so that the html doesn't need to be modified. I would however probably consider using canvas instead as it will give more...
Your <!-- <> --> is invalidating and causing your rules in the first set of curly brackets to break. This css, * { margin: 0; padding: 0; border: 0; overflow:...
I think you may want to look more carefully at why the problem is occurring, however, I can help you hack around it! You could display none or all DOM...
If you want true 'responsiveness' you can use the vw units which are directly related to the viewport width. Jsfiddle Demo Support isn't bad: CanIUse.com #menu ul { list-style-type: none;...
I've already done a sample like as you said. Please refer here for details. HTML <div ng-app="myApp" ng-controller="testController"> <input type="text" ng-class="cssClass" ng-change="changeCssInput()" ng-model="text"/> </div> CSS .input-blue { border: 3px solid...
According to MSDN, this is doable directly with the IE8 developer tools: http://msdn.microsoft.com/en-gb/library/dd565628%28VS.85%29.aspx#html_liveedit...
If you just want to make sure the text color is appropriate for the background you set, try setting -fx-background to the same value as -fx-background-color: .editableColumn.table-cell { -fx-background-color:lightyellow; -fx-background:...
If you were using Chrome, and had open the style.css file at least once then you may use this method to recover the cache: chrome://cache/ You will get all the...
Now just define this css #menu .child-list > li:hover > a { background: #E0E0E0 url(http://www.coeliac.org.uk/sites/coeliac.org.uk/themes/coeliac/images/icon_arrow_small_right.gif) right no-repeat; } Live Demo...
I'd suggest that if you're using JavaScript for this, that you don't need ANCHOR tags because you've already negated the need for them. I'd suggest changing to adding click events...
First, use click, not mouseup, with buttons. Then just get the player name and don't start the game if it's blank: $(document).ready(function () { //document ready $('.start').on('click', function () {...
wrap them in a div with a set width and margin: 0 auto;... for example change your top level div from align="center" to class="center" (or id instead of class) and...
You can reliably use CSS.supports() in JavaScript or @supports in CSS to detect support for custom properties. Every version of every browser that supports custom properties also supports this method...
Jquery's Hide & Show behave like CSS's display:none & display: [the default display value of the element] Working Fiddle <-- with minimum changes (I would actually use this)...