html - Strange behavior of fixed element (100% height) and css3 transform / transition -


I am using Google Chrome 32 in a Windows Vista PC. I am currently creating an off-canvas menu using the status: fixed to set the layout and CSS transform to show / hide the menu.

Working on it, I had to face the strange behavior of the layout. If I open a narrow window to check the mobile version with the off-canvas menu, it's all right, the menu is positioned correctly and 100% height , as if I wanted to But, if I change the size of the window, then the menu loses its 100% height, and the element gets the height of the parent (also using the position: fixed ) does anyone Have you faced this issue? If so, how can I avoid it?

The markup for the menu is: 

  & lt; Body & gt; & Lt; Header & gt; & Lt; Div class = "container" & gt; & Lt; Span id = "logo" & gt; Logo & lt; / Span & gt; & Lt; A href = "#" id = "mobile-nav" & gt; Menu & lt; / A & gt; & Lt; NAV & gt; & Lt; Ul id = "menu" & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Link & lt; / A & gt; & Lt; / Li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Link & lt; / A & gt; & Lt; / Li & gt; & Lt; / Ul & gt; & Lt; / Neo & gt; & Lt; / Div & gt; & Lt; / Header & gt; & Lt; / Body & gt;

and CSS: 

  body {font-family: sans-serif; } Header, nav {status: fixed; Top: 0; } Headers {Width: 100%; Left: 0; Height: 45px; Background color: #ffccx; -WebKit-Infection: All .2s ease-in-out; Transition: All .2s ease-in-out; }. Container {max-width: 1024px; Status: Relative; Margin: 0 auto; Display area; } #lollow {position: absolute; Top: 10px; Left: 10px; } # Mobile-nav {display: inline-block; Padding: 7px 10px; Status: Completed; Top: 5px; Correct: 5px; Background color: # cc3300; Color: #fff; Text-decoration: None; } NAV {true: 0; Bottom: 0; Width: 30%; Background color: # cc3300; Z-index: 999; Webkit-transform: TransLux (100%); Conversion: Translator X (100%); } Body.active header {-webkit-transform: translateX (-30%); Conversion: Translator X (-30%); } # Menu {margin: 0; Padding: 0; List style: none; } # Menu a {display: block; Padding: 20px; Text-decoration: None; Color: #fff; font-weight: bold; } #Menu A: Hover {background-color: # FF300; }

You can behave this first to open / close the menu to play with the menu button, then open the menu and resize the scene to see the problem.

I fix the HTML structure to fix the problem you are seeing and some of your CSS Has modified. Here's the solution of

I believe that this issue had to do with the translation so I changed it to use instead of status Gave.


Comments

Post a Comment

Popular posts from this blog

ios - How do I use CFArrayRef in Swift? -

I am using Objective-class in my Swift Project through a bridging header. The method signature looks like this: - Some cement (some type) some parameters; I started by getting an example of class, calling method, and storing the value: var myInstance = MyClassWithThatMethod (); Var cfArr = myInstance.someMethod (some value); Then try to get the value in the array: var valueInArrayThatIWant = CFArrayGetValueAtIndex (cfArr, 0); However, I get the error unmanaged & lt; Cfarray & gt; Not like 'CFArray' . Unmanaged & lt; Cfarray & gt; also means? I looked, but I do not need to change the array in a fast array (though it would be good). I need to be able to get value from the array. I also tried CFArray method to pass in a function: func doSomeStuffOnArray (myArray: NSArray) {} Although I get the same error when using: doSomeStuffOnArray (cfArr); // unmanaged & lt; CFArray & gt; I am using CFArray because I want to sto...
Read more

eclipse plugin - Run java code error: Workspace is closed -

To create an automated project, I created a plug-in project with the following dependencies: Org.eclipse.core.resources org.eclipse.equinox.registry org.eclipse.core.runtime and the following The Java class is located in the src folder: Package Examiner; Import org.eclipse.core.resources.IProject; Import org.eclipse.core.resources.IWorkspaceRoot; Import org.eclipse.core.resources.ResourcesPlugin; Import org.eclipse.core.runtime.CoreException; Import org.eclipse.core.runtime.IProgressMonitor; Import org.eclipse.core.runtime.NullProgressMonitor; Public class tes {public static zero main (string [] args) {// TODO auto generated method stub IProgressMonitor progress monitor = new NullProgressMonitor (); IWorkspaceRoot root = ResourcesPlugin.getWorkspace (). GetRoot (); Ipoject project = root.jetproject ("desired projectname"); Try {Project.create (progress monitor); Project.open (progressMonitor); } Grip (CoreException E) {// TODO Auto generated blocking block e....
Read more

c - Error on building source code in VC 6 -

When I create my project in VC6, the BScMKE reports the following error Linking .. Creating Library ... .. / ... / PB / Bean / Debub / ICEERP.Lib and Object ........ P.B. / Bean / DBube / ICREPlay.APP Browse information file ... BSMMK: ​​error can not be read from BK 1505: file '../../PB/bin/TmpOut/ICReplay/Debug/ICReplay_PB.bsc' Error executing bscmake.exe Can someone help me? 2 Reason for reference from: "ICReplay_PB .bsc "file will be corrupted The trunk of the file will be happening with the compiler running out of disk space or is being interrupted when creating .sbr file I think this answer will help you!
Read more