I'm doing a fixed sidebar that I resolved here in stack overflow, so now I have a fixed bar with this code:
<div id="main" style="width:100%;background:red;">
<div id="sidemenu" style="float:left;height:200px;background:#000;">
menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
menu<br />
</div>
<div id="content" style="height:200px;overflow-y:scroll;background:silver;">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>
It has a height of 200px (just to see how it works), but the sidebar I need has to have a height of 100% all the time. I have seen various posts here in stackoverflow that say that faux columns is a option: http://www.alistapart.com/articles/fauxcolumns/ . But inside my <div id="sidebar"> I'll have, in some cases, 2 more DIVs: #menu and #submenu, so the width will vary.
What can I do? I don't need support for old browsers: IE9, latest Chrome and latest Firefox is OK.
I'd add a border-left to the body, get the longest menu item and match it's width in ems, then set a negative margin on the sidemenu. Then it'll appear to match whatever height the content div takes up (either if you set it explicitly, or if content expands it):
<body style="border-left: 10em solid #666;">
<div id="main" style="background:red;">
<div id="sidemenu" style="float:left;margin-left: -10em;width:10em;background:#666;">
menu<br />
menu<br />
menu<br />
very long menu item<br />
menu<br />
menu<br />
</div>
<div id="content" style="height:400px;background:silver;">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>
</body>
For a sidebar with a textured background (one method), you could set the width in pixels to match the width of the texture (not as flexible as ems but if set to the widest item, should be okay) and the texture repeats along the y-axis:
<div id="main" style="background: url(pattern_157.gif) repeat-y;">
<div id="sidemenu" style="float:left;width:200px;background: transparent;">
menu<br />
menu<br />
menu<br />
very long menu item<br />
menu<br />
menu<br />
</div>
<div id="content" style="height:600px;background:transparent;">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>
Is the problem that your column background has some kind of gradient? If it's just solid colour, could you not just leave the widths of the 2 columns unset, and tile the background image on the x axis as well as on the y axis?
Here is another idea for this using fixed positioning and height of 100%. I also put enough breaks in there to show how the content will scroll, but the sidebar and its contents will stay where they are.
<body style="margin:0;">
<div id="main">
<div id="sidemenu" style="width:200px; position:fixed; height:100%; background: url(http://www.bittbox.com/wp-content/uploads/2007/12/free_grunge_paper_1.jpg) repeat;">
menu<br />
menu<br />
menu<br />
very long menu item<br />
menu<br />
menu<br />
</div>
<div id="content" style="background:transparent; float:left; margin:0 0 0 220px;">
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
content <br />
</div>
</div>
</body>
Related
How can we set height of green box equal to the height of red box with scroll in green box. Please note that we cannot set height of red box, it is dynamic and may be changed as content changes.
https://jsfiddle.net/guqfz069/13/
.container{
display: flex;
height: 100%;
}
.left{
background-color: #f00;
width: 60%;
height: 100%;
}
.right{
background-color: #0f0;
width: 40%;
}
<div class="container">
<div class="left">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
<div class="right">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
</div>
with position and absolute for .right you can do that
.container{
display: flex;
height: 100%;
position: relative;
}
.left{
background-color: #f00;
width: 60%;
height: 100%;
}
.right{
background-color: #0f0;
width: 40%;
position: absolute;
right: 0;
height: 100%;
overflow-y: auto;
}
<div class="container">
<div class="left">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
<div class="right">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
</div>
You can do this:
.container {
display: flex;
width: 100%;
}
.container>* {
flex: 1;
}
.left {
background-color: #f00;
width: 60%;
}
.right {
background-color: #0f0;
width: 40%;
}
<div class="container">
<div class="left">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
<div class="right">
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
Here is the sample content <br />
</div>
</div>
DEMO HERE: https://jsfiddle.net/ayL75j4h/
I would use CSS Grid to achieve this effect.
.container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
height: 100%;
}
This will make a grid with two columns, one for .left, one for .right with the same width & height; The fr (fractional unit) makes sure of that.
Let me know if this helps you
If you add align-items: flex-start and maybe add height: 100%; to child elements?
Use-->> max-height:130px; overflow:auto; -->> in both class left and right,
like this
.left{
background-color: #f00;
width: 60%;
height: 100%;
max-height:130px;
overflow:auto
}
.right{
background-color: #0f0;
width: 40%;
max-height:130px;
overflow:auto
}
and u will get this
Hope this helped you
Add height:auto to .left
.left{
background-color: #f00;
width: 60%;
height: auto;
}
UPDATE
Based on #Riz's comment
I believe we'll need some js to achieve this
const leftHeight = document.querySelector('.left').offsetHeight;
document.querySelector('.right').style.height = `${leftHeight}px`;
since offsetHeight includes margin and padding, it'll be better if box-sizing: border-box is set
I have recreated a minimal reproducible example for the following question p:calendar popup remain below from calendar input in dialog when scroll (on IE and Chrome). I have also been encountering this issue and just figured out what was happening but I do not know how to fix it. The appendTo suggestion in the referenced question for selectOneMenu does not seem to be an attribute we can apply to the calendar.
Here is how to reproduce:
If the parent window is scrolled to the top, the calendar popup on the dialog is positioned correctly
If the parent window is scrolled down a little, the calendar popup on the dialog is positioned a little further down from the input box
The distance offset is seems relative to the amount the parent window is scrolled.
the top value seems to be the culprit.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html" xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:p="http://primefaces.org/ui" xmlns:pe="http://primefaces.org/ui/extensions" xmlns:o="http://omnifaces.org/ui" xmlns:of="http://omnifaces.org/functions">
<h:head>
<title>Calendar</title>
</h:head>
<h:body>
<h1>Calendar Popup Issue PF 8.0</h1>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h:panelGrid id="gridId">
<h:panelGrid id="panelId">
<h:form id="laborForm">
<p:commandButton oncomplete="PF('dialogWv').show()" title="Click to open dialog" update="dialogId" value="Open dialog with popup time only calendar" />
</h:form>
</h:panelGrid>
</h:panelGrid>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p:dialog id="dialogId" header="Test" dynamic="true" widgetVar="dialogWv" modal="true" showEffect="fade" hideEffect="fade"
resizable="true" width="400px" height="100px">
<h:form id="formId">
<p:panelGrid style="margin-bottom: 5px; border: 2px; width: 100%;" id="pg1">
<p:row>
<p:column colspan="2">
<p:calendar value="#{cc.attrs.viewBean.backfitTime}" timeOnly="true" pattern="HH:mm" showMillisec="false" showSecond="false" required="true"
requiredMessage="Time is required" rendered="true" />
</p:column>
</p:row>
</p:panelGrid>
<br />
</h:form>
</p:dialog>
</h:body>
</html>
EDIT
I am unable upgrade to PF10 at the moment due to too much of my site's look and feel getting broke with 10. So my short term fix was just to use the datePicker but with PF8. But the datePicker with PF8 doesn't render nice. Plus the mouse pointer covers the hour and minute numbers when incrementing up.
Clicking an up or down arrow is inefficient.
This is fixed in PrimeFaces 10.0.0RC1 or higher.
Issue: https://github.com/primefaces/primefaces/issues/6583
You should use p:datePicker instead of p:calendar. DatePicker is designed to replace the old p:calendar component. The p:datePicker (at least the one in PrimeFaces 10) uses absolute positioning instead of fixed, so that should solve your problem.
See also:
Can I position an element fixed relative to parent?
https://primefaces.github.io/primefaces/10_0_0/#/components/datepicker
After a long hiatus I'm currently trying to do a page with a menu and a scrolling pane on the right side.
It works well except that the scroll bar does not go down the full height of the page instead going about 400-600 px vertically (all content else is scrolled). The menu though that I have works well with staying fixated on top. Now my question is how can I do a scrollbar that goes down the remaining window (except the menu space)?
HTML file:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mytitle</title>
<link rel="stylesheet" href="default.css">
</head>
<body>
<div id="header">
<div name="phone">
<img src="images/phone" alt="phone" /> 000-000-000-000
</div>
<div name="eMail">
<a href="mailto:mymail#mail.com">
<img src="images/email.png" alt="email">
office#blahblah
</a>
</div>
<div id="menu">
<img src="images/logo.png" />
<div name="Mh">
Home
</div>
<div name="Mw">
blah
</div>
<div name="MOffers">
Offers
</div>
<div name="mD">
T
</div>
<div name="mI">
Infos
</div>
<div name="mC">
Kontakt
</div>
<div name="mI">
Impressum
</div>
</div>
<div id="banner">
BANNER
</div>
<div id="content">
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
a <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
b <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
c <br />
b <br />
<div name="w">
</div>
<div name="a">
</div>
<div name="o">
</div>
<div name="d">
</div>
<div name="Infos">
</div>
<div name="Contact">
</div>
<div name="Impressum">
</div>
</div>
</div>
</body>
</html>
css file:
body {
}
#header {
position: fixed;
width: 100%;
}
#content {
width: 99%;
height: 100%;
overflow-y: scroll;
overflow-x:hidden;
}
As a note here: The #content part I only added after seeing that even though there was an overflow there was no scroll bar appearing.
Try with this, as said Gerdi the way is flexbox: https://jsfiddle.net/Lm2dr14o/1/
body, html {
height:100%;
overflow:hidden;
}
#header {
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
display:flex;
flex-direction:column;
}
#header>div {
flex-grow: 1;
}
#content {
width: 98%;
height:98%;
margin: 1%;
overflow-y: scroll;
overflow-x:hidden;
flex-grow: 2;
}
Hope this help you.
I have a subdomain in this name (job.amez.co) and there is a master page inside my subdomain that contain some links and one of the links redirect me to a page (Logout.aspx)
<div class="blockContent">
<span id="span"></span>
بەخێربێیت بەرێز: <span id="wel" runat="server" style="font-weight: bold;"></span>
<br />
<br />
<div style="font-weight: bold;">
<asp:HyperLink ID="HyperLink1" NavigateUrl="~/Profile.aspx" runat="server">پرۆفایل</asp:HyperLink></div>
<br />
<div style="font-weight: bold;">
<asp:HyperLink ID="HyperLink2" NavigateUrl="~/jobs/Myjobs.aspx" runat="server">کارەکانم</asp:HyperLink></div>
<br />
<div style="font-weight: bold;">
<asp:HyperLink ID="HyperLink3" NavigateUrl="~/LogOut.aspx" runat="server">چوونە دەرەوە</asp:HyperLink></div>
<br />
</div>
and when ever I click on these links instead of taking me to job.amez.co/LogOut.aspx it takes me to job.amez.co/job/LogOut.aspx
i have a simple markup with a navigation div, a content div and a footer div.
If I open my "page", everything seems okay. But if I open the page and then resize the browser window to e.g. 30%, then the content div slides down.
It seems only to occur in internet explorer.
The test markup:
<html>
<body>
<div id="container">
<div id="navi" style="float:left;width:197px;background-color:blue;">
NaviContent
<br /><br />
more NaviContent
</div>
<div id="content" style="width:820px;background-color:yellow">
<table>
<tr>
<td>Content
<br /><br />
more ContentContent
<br /><br /><br /><br />
<br /><br /><br /><br />
more ContentContent
<br /><br /><br /><br />
<br /><br /><br /><br />
more ContentContent
</td>
</tr>
</table>
</div>
<div id="footer" style="clear:both;">
Footer Content
</div>
</div>
</body>
</html>
Images of the problem:
browser in 100% view:
http://www.suckmypic.net/25729/1.png
browser window resized: http://www.suckmypic.net/25730/2.png
Please help
You need to give your #container a width
This is because sum content + navi > window width.